/**
 * Tajelo / TSOY.CLOUD Design System
 * colors_and_type.css — Canonical design tokens
 *
 * Import this file to use Tajelo design tokens in any HTML/CSS artifact.
 * Depends on: Google Fonts (Manrope, JetBrains Mono)
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ─── Base Brand Tokens ──────────────────────────────────────────────────── */
:root {
  /* Accent (primary interactive) */
  --t-accent: #6f6fff;
  --t-accent-rgb: 111, 111, 255;

  /* Brand palette — neutral variant (default) */
  --t-brand-warm-rgb: 236, 118, 88;   /* coral/salmon */
  --t-brand-cool-rgb: 82, 190, 178;   /* teal */
  --t-brand-ink-rgb: 28, 38, 58;      /* dark navy */
  --t-brand-mist-rgb: 214, 228, 240;  /* light blue-grey */

  /* Derived brand colours */
  --t-brand-warm: rgb(var(--t-brand-warm-rgb));
  --t-brand-cool: rgb(var(--t-brand-cool-rgb));
  --t-brand-ink: rgb(var(--t-brand-ink-rgb));
  --t-brand-mist: rgb(var(--t-brand-mist-rgb));

  /* Status colours */
  --t-color-success: #22c55e;
  --t-color-warning: #f59e0b;
  --t-color-danger: #ef4444;
  --t-color-call: #10b981;
  --t-color-info: #3b82f6;

  /* Psychedelic accent spectrum (for decorative use) */
  --t-psy-1: 236, 118, 88;   /* warm coral */
  --t-psy-2: 82, 190, 178;   /* cool teal */
  --t-psy-3: 244, 186, 102;  /* amber gold */
  --t-psy-4: 126, 154, 234;  /* soft indigo */
}

/* ─── Typography ─────────────────────────────────────────────────────────── */
:root {
  --t-font-sans: "Manrope", "Inter", "Segoe UI", Roboto, "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --t-font-mono: "JetBrains Mono", "Cascadia Mono", "Consolas", monospace;
  --t-font-scale: 1;

  /* Semantic type sizes */
  --t-text-xs:   0.72rem;
  --t-text-sm:   0.85rem;
  --t-text-base: 1rem;
  --t-text-md:   1.1rem;
  --t-text-lg:   1.25rem;
  --t-text-xl:   1.5rem;
  --t-text-2xl:  1.875rem;
  --t-text-3xl:  2.25rem;
  --t-text-4xl:  3rem;

  /* Weights */
  --t-weight-normal: 400;
  --t-weight-medium: 500;
  --t-weight-semibold: 600;
  --t-weight-bold: 650;
  --t-weight-bolder: 700;
  --t-weight-heavy: 760;

  /* Letter-spacing */
  --t-tracking-tight: -0.025em;
  --t-tracking-snug: -0.01em;
  --t-tracking-normal: 0em;
  --t-tracking-wide: 0.04em;
  --t-tracking-wider: 0.08em;

  /* Line height */
  --t-leading-tight: 1.15;
  --t-leading-snug: 1.3;
  --t-leading-base: 1.5;
  --t-leading-relaxed: 1.65;
}

/* ─── Spacing ─────────────────────────────────────────────────────────────── */
:root {
  --t-space-1: 0.25rem;   /* 4px  */
  --t-space-2: 0.5rem;    /* 8px  */
  --t-space-3: 0.75rem;   /* 12px */
  --t-space-4: 1rem;      /* 16px */
  --t-space-5: 1.25rem;   /* 20px */
  --t-space-6: 1.5rem;    /* 24px */
  --t-space-8: 2rem;      /* 32px */
  --t-space-10: 2.5rem;   /* 40px */
  --t-space-12: 3rem;     /* 48px */
}

/* ─── Radii ───────────────────────────────────────────────────────────────── */
:root {
  --t-radius: 18px;
  --t-radius-sm: 13px;
  --t-radius-lg: 21px;
  --t-radius-xl: 24px;
  --t-radius-2xl: 28px;
  --t-radius-full: 999px;

  /* Component-specific */
  --t-radius-btn: 14px;     /* radius - 4px */
  --t-radius-input: 12px;   /* radius - 6px */
  --t-radius-card: 21px;    /* border-radius-lg */
  --t-radius-modal: 24px;
  --t-radius-toast: 16px;
  --t-radius-badge: 999px;
  --t-radius-nav-icon: 999px;
}

/* ─── Shadows ─────────────────────────────────────────────────────────────── */
:root {
  --t-shadow-soft:    0 8px 18px rgba(9, 15, 24, 0.05), 0 2px 6px rgba(9, 15, 24, 0.03);
  --t-shadow-base:    0 18px 46px rgba(9, 15, 24, 0.09), 0 4px 14px rgba(9, 15, 24, 0.05);
  --t-shadow-hover:   0 28px 60px rgba(9, 15, 24, 0.15), 0 12px 26px rgba(9, 15, 24, 0.08);
  --t-shadow-accent:  0 14px 28px rgba(var(--t-accent-rgb), 0.2);
  --t-shadow-warm:    0 12px 28px rgba(var(--t-brand-warm-rgb), 0.18);
}

/* ─── Motion ──────────────────────────────────────────────────────────────── */
:root {
  --t-motion-fast: 0.16s;
  --t-motion-base: 0.24s;
  --t-motion-slow: 0.42s;
  --t-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-ease-emphasis: cubic-bezier(0.16, 1, 0.3, 1);   /* spring-like */
  --t-ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1); /* overshoot */
}

/* ─── Glass / Surface ─────────────────────────────────────────────────────── */
:root {
  --t-glass-blur-soft: 12px;
  --t-glass-blur-strong: 18px;
  --t-surface-border-alpha: 0.5;
  --t-surface-bg-alpha: 0.62;
  --t-surface-tint-warm-alpha: 0.16;
  --t-surface-tint-cool-alpha: 0.12;
  --t-focus-ring-alpha: 0.16;
}

/* ─── Light theme surface helpers ────────────────────────────────────────── */
:root, [data-bs-theme="light"] {
  --t-bg: #f4f7fb;
  --t-bg-rgb: 244, 247, 251;
  --t-fg: #1c263a;
  --t-fg-secondary: #5a6a82;
  --t-fg-muted: #8fa0b8;
  --t-border: rgba(0, 0, 0, 0.09);
  --t-border-strong: rgba(0, 0, 0, 0.14);

  --t-card-bg: rgba(255, 255, 255, 0.72);
  --t-surface-line-soft: rgba(0, 0, 0, 0.05);
  --t-surface-line-strong: rgba(0, 0, 0, 0.10);
  --t-surface-highlight: rgba(255, 255, 255, 0.60);
}

/* ─── Dark theme surface helpers ─────────────────────────────────────────── */
[data-bs-theme="dark"] {
  --t-bg: #0d1220;
  --t-bg-rgb: 13, 18, 32;
  --t-fg: #e8eef8;
  --t-fg-secondary: #8fa8c8;
  --t-fg-muted: #5a7090;
  --t-border: rgba(255, 255, 255, 0.08);
  --t-border-strong: rgba(255, 255, 255, 0.14);

  --t-card-bg: rgba(20, 28, 48, 0.80);
  --t-surface-line-soft: rgba(255, 255, 255, 0.06);
  --t-surface-line-strong: rgba(255, 255, 255, 0.12);
  --t-surface-highlight: rgba(255, 255, 255, 0.04);

  --t-shadow-base:  0 24px 56px rgba(0, 0, 0, 0.32), 0 8px 18px rgba(0, 0, 0, 0.22);
  --t-shadow-hover: 0 34px 70px rgba(0, 0, 0, 0.40), 0 16px 30px rgba(0, 0, 0, 0.24);
}

/* ─── Semantic element styles ────────────────────────────────────────────── */
body {
  font-family: var(--t-font-sans);
  font-size: calc(16px * var(--t-font-scale));
  font-weight: var(--t-weight-normal);
  line-height: var(--t-leading-base);
  color: var(--t-fg);
  background-color: var(--t-bg);
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--t-font-sans);
  font-weight: var(--t-weight-bold);
  letter-spacing: var(--t-tracking-snug);
  line-height: var(--t-leading-tight);
  color: var(--t-fg);
}

h1 { font-size: var(--t-text-3xl); }
h2 { font-size: var(--t-text-2xl); }
h3 { font-size: var(--t-text-xl);  }
h4 { font-size: var(--t-text-lg);  }
h5 { font-size: var(--t-text-md);  }
h6 { font-size: var(--t-text-base); font-weight: var(--t-weight-semibold); }

p  { font-size: var(--t-text-base); line-height: var(--t-leading-relaxed); }

small, .text-sm { font-size: var(--t-text-sm); }

code, pre, kbd, samp {
  font-family: var(--t-font-mono);
  font-size: 0.92em;
}

/* Utility kicker / eyebrow label */
.t-kicker {
  font-size: var(--t-text-xs);
  font-weight: var(--t-weight-bolder);
  letter-spacing: var(--t-tracking-wider);
  text-transform: uppercase;
  color: var(--t-fg-secondary);
}