/* ============================================================
   DESIGN TOKENS
   Single source of truth for colors, spacing, type, motion.
   ============================================================ */

:root {
  /* ----- Surfaces ----- */
  --bg-base:        #08080B;
  --bg-elevated:    #0F0F12;
  --bg-card:        #131318;
  --bg-card-hover:  #17171D;
  --bg-overlay:     rgba(8, 8, 11, 0.72);

  /* ----- Borders (rgba for compositing over gradients) ----- */
  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.16);
  --border-accent:  rgba(99, 102, 241, 0.40);

  /* ----- Foreground ----- */
  --fg-primary:     #F4F4F5;
  --fg-secondary:   #B4B4BB;
  --fg-tertiary:    #8A8A93;
  --fg-quaternary:  #5A5A63;
  --fg-on-accent:   #FFFFFF;

  /* ----- Accent (Iris / Indigo) ----- */
  --accent:         #6366F1;
  --accent-hover:   #818CF8;
  --accent-dim:     #4F46E5;
  --accent-soft:    rgba(99, 102, 241, 0.12);
  --accent-glow:    rgba(99, 102, 241, 0.28);

  /* ----- Secondary accent (Teal) · used sparingly ----- */
  --teal:           #2DD4BF;
  --teal-soft:      rgba(45, 212, 191, 0.12);

  /* ----- Semantic ----- */
  --success:        #34D399;
  --warning:        #FBBF24;
  --danger:         #F87171;

  /* ----- Typography ----- */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --font-mono:  'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Modular type scale (1.25 ratio) */
  --text-xs:    0.75rem;     /* 12 */
  --text-sm:    0.8125rem;   /* 13 */
  --text-base:  0.9375rem;   /* 15 */
  --text-md:    1rem;        /* 16 */
  --text-lg:    1.125rem;    /* 18 */
  --text-xl:    1.375rem;    /* 22 */
  --text-2xl:   1.75rem;     /* 28 */
  --text-3xl:   2.25rem;     /* 36 */
  --text-4xl:   3rem;        /* 48 */
  --text-5xl:   4rem;        /* 64 */
  --text-6xl:   5.5rem;      /* 88 */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  --tracking-tight:  -0.03em;
  --tracking-snug:   -0.02em;
  --tracking-normal: -0.01em;
  --tracking-wide:    0.02em;
  --tracking-wider:   0.14em;
  --tracking-widest:  0.22em;

  /* ----- Spacing scale (4px base) ----- */
  --s-1:   0.25rem;
  --s-2:   0.5rem;
  --s-3:   0.75rem;
  --s-4:   1rem;
  --s-5:   1.25rem;
  --s-6:   1.5rem;
  --s-8:   2rem;
  --s-10:  2.5rem;
  --s-12:  3rem;
  --s-16:  4rem;
  --s-20:  5rem;
  --s-24:  6rem;
  --s-32:  8rem;
  --s-40:  10rem;

  /* ----- Radii ----- */
  --r-xs:   3px;
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   14px;
  --r-xl:   20px;
  --r-2xl:  28px;
  --r-full: 9999px;

  /* ----- Shadows ----- */
  --shadow-xs:   0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-sm:   0 2px 6px rgba(0, 0, 0, 0.32);
  --shadow-md:   0 8px 24px rgba(0, 0, 0, 0.40);
  --shadow-lg:   0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-glow: 0 0 60px -10px var(--accent-glow);
  --shadow-ring: 0 0 0 1px var(--border-default);

  /* ----- Layout ----- */
  --container:        1200px;
  --container-narrow: 880px;
  --gutter:           clamp(1.25rem, 4vw, 2.5rem);

  /* ----- Motion ----- */
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:        140ms;
  --dur-base:        240ms;
  --dur-slow:        460ms;
  --dur-slower:      720ms;

  /* ----- Z-index ----- */
  --z-base:    1;
  --z-overlay: 50;
  --z-nav:     90;
  --z-modal:   100;
  --z-toast:   110;
}

/* Respect user's reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast:   0ms;
    --dur-base:   0ms;
    --dur-slow:   0ms;
    --dur-slower: 0ms;
  }
}