/* ============================================
   DESIGN TOKENS — Single source of truth
   ============================================ */

:root {
  /* --- Colors --- */
  --bg:           #0a0a0c;
  --bg-card:      #12121a;
  --bg-elevated:  #1a1a24;
  --text:         #f0f0f5;
  --text-muted:   #9090a0;
  --text-dim:     #404055;
  --accent:       #4a7cff;
  --accent-glow:  rgba(74, 124, 255, 0.15);
  --warm:         #ff6b4a;
  --green:        #3ecf8e;
  --purple:       #a78bfa;
  --error:        #f97066;

  /* --- Borders & Overlays --- */
  --border-subtle:  rgba(255, 255, 255, 0.04);
  --border-light:   rgba(255, 255, 255, 0.06);
  --border-medium:  rgba(255, 255, 255, 0.1);
  --border-strong:  rgba(255, 255, 255, 0.15);
  --overlay-dark:   rgba(0, 0, 0, 0.3);
  --overlay-darker: rgba(0, 0, 0, 0.4);

  /* --- Typography --- */
  --font-sans:  'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-display: 'Plus Jakarta Sans', -apple-system, system-ui, sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --fs-xs:   0.65rem;
  --fs-sm:   0.75rem;
  --fs-base: 0.85rem;
  --fs-md:   0.9rem;
  --fs-lg:   1rem;
  --fs-xl:   1.1rem;
  --fs-2xl:  1.3rem;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-extrabold: 800;

  --lh-tight:    1.1;
  --lh-heading:  1.2;
  --lh-normal:   1.6;
  --lh-relaxed:  1.7;
  --lh-loose:    1.8;

  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.1em;
  --ls-wider:  0.15em;
  --ls-widest: 0.2em;

  /* --- Spacing Scale --- */
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 2.5rem;
  --space-3xl: 3rem;
  --space-4xl: 4rem;
  --space-5xl: 5rem;
  --space-6xl: 6rem;
  --space-8xl: 8rem;

  /* --- Border Radius --- */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  20px;
  --radius-full: 50%;
  --radius-pill: 50px;

  /* --- Shadows --- */
  --shadow-sm:     0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-md:     0 8px 24px rgba(0, 0, 0, 0.2);
  --shadow-lg:     0 20px 60px rgba(0, 0, 0, 0.3);
  --shadow-xl:     0 30px 80px rgba(0, 0, 0, 0.4);
  --shadow-accent: 0 8px 30px var(--accent-glow);
  --shadow-hover:  0 4px 20px var(--accent-glow);

  /* --- Transitions --- */
  --ease-default:  ease;
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.3s;
  --duration-slow: 0.5s;
  --duration-anim: 0.6s;
  --duration-long: 0.8s;
  --transition-color:   color var(--duration-base) var(--ease-default);
  --transition-all:     all var(--duration-base) var(--ease-default);
  --transition-transform: transform var(--duration-fast), box-shadow var(--duration-fast);

  /* --- Layout --- */
  --nav-h: 60px;
  --container-xs:  400px;
  --container-sm:  500px;
  --container-md:  650px;
  --container-lg:  900px;
  --container-xl:  1000px;
  --container-2xl: 1200px;

  /* --- Z-index Scale --- */
  --z-base:    1;
  --z-above:   2;
  --z-sticky:  10;
  --z-nav:     100;
  --z-progress: 101;
  --z-overlay: 200;
  --z-theme:   9999;
}