/* ============================================================
   X FINALE — The World Reset Engine
   tokens.css — the single source of truth for the design system
   Direction: cinematic cosmic command center.
   Digital sunset · neural gold · black glass · film grain.
   ============================================================ */

:root {
  /* ---- Core field: deep space, warm undertone ---- */
  --void:        oklch(12% 0.028 275);   /* deepest background */
  --void-2:      oklch(15% 0.032 274);   /* lifted panels */
  --surface:     oklch(19% 0.034 272);   /* cards */
  --surface-2:   oklch(23% 0.036 270);   /* hover / raised */
  --hairline:    oklch(100% 0 0 / 0.09); /* borders */
  --hairline-2:  oklch(100% 0 0 / 0.16);

  /* ---- Neural gold: the signal, the sun ---- */
  --gold:        oklch(83% 0.13 79);
  --gold-soft:   oklch(88% 0.09 82);
  --gold-deep:   oklch(70% 0.14 66);

  /* ---- Ember: warmth, the horizon fire ---- */
  --ember:       oklch(70% 0.19 42);
  --ember-deep:  oklch(58% 0.19 34);

  /* ---- Verified signal: cool, trustworthy teal ---- */
  --verified:    oklch(82% 0.11 197);
  --verified-dim:oklch(66% 0.09 200);

  /* ---- Future dispatch: speculative nebula violet ---- */
  --violet:      oklch(66% 0.19 300);
  --violet-dim:  oklch(72% 0.14 302);   /* lifted for AA on Future Dispatch labels */

  /* ---- Aurora spectrum: iridescent accents for the "future" palette ---- */
  --iris:        oklch(70% 0.19 285);   /* violet-blue */
  --cyan:        oklch(82% 0.14 200);   /* electric cyan */
  --aqua:        oklch(85% 0.12 178);   /* aqua-mint */
  --rose:        oklch(74% 0.18 8);     /* warm rose-magenta */
  --grad-aurora: linear-gradient(100deg, var(--iris) 0%, var(--cyan) 32%, var(--gold) 64%, var(--rose) 100%);
  --grad-iris:   linear-gradient(120deg, var(--iris), var(--cyan));

  /* ---- Glow tokens ---- */
  --glow-gold:   0 0 44px -6px oklch(83% 0.13 79 / 0.45);
  --glow-iris:   0 0 50px -8px oklch(70% 0.19 285 / 0.5);
  --glow-cyan:   0 0 48px -8px oklch(82% 0.14 200 / 0.45);

  /* ---- Type colors ---- */
  --text:        oklch(96% 0.012 85);
  --text-muted:  oklch(74% 0.02 85);
  --text-faint:  oklch(66% 0.02 82);    /* lifted to clear AA (4.5:1) on void + glass */
  --text-ink:    oklch(16% 0.03 274);   /* on gold surfaces */

  /* ---- Glass ---- */
  --glass:       oklch(20% 0.03 274 / 0.55);
  --glass-2:     oklch(24% 0.032 272 / 0.6);
  --blur:        16px;

  /* ---- Signature gradients ---- */
  --grad-sunset: linear-gradient(180deg,
                   transparent 0%,
                   oklch(30% 0.09 40 / 0.14) 55%,
                   oklch(55% 0.16 45 / 0.28) 82%,
                   oklch(78% 0.15 60 / 0.42) 100%);
  --grad-gold:   linear-gradient(100deg, var(--gold-soft), var(--gold), var(--ember));
  --grad-text:   linear-gradient(100deg, var(--gold-soft) 0%, var(--gold) 45%, var(--ember) 100%);
  --grad-verify: linear-gradient(100deg, var(--verified), var(--verified-dim));
  --grad-future: linear-gradient(100deg, var(--violet), var(--ember-deep));

  /* ---- Typography ---- */
  --font-display: "Fraunces", "Georgia", serif;
  --font-sans:    "Space Grotesk", system-ui, -apple-system, sans-serif;

  --text-xs:   clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --text-sm:   clamp(0.84rem, 0.8rem + 0.2vw, 0.92rem);
  --text-base: clamp(1rem, 0.94rem + 0.3vw, 1.12rem);
  --text-lg:   clamp(1.18rem, 1.05rem + 0.6vw, 1.5rem);
  --text-xl:   clamp(1.5rem, 1.2rem + 1.4vw, 2.4rem);
  --text-2xl:  clamp(2rem, 1.4rem + 3vw, 3.8rem);
  --text-hero: clamp(3.2rem, 1.2rem + 9vw, 9rem);
  --text-epic: clamp(4rem, 1rem + 13vw, 13rem);

  --leading-tight: 1.02;
  --leading-snug:  1.18;
  --leading-body:  1.62;

  --tracking-tight: -0.03em;
  --tracking-wide:  0.08em;
  --tracking-mega:  0.34em;

  /* ---- Spacing rhythm (not uniform — intentional jumps) ---- */
  --space-1: 0.5rem;
  --space-2: 0.875rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6.5rem;
  --space-section: clamp(5rem, 3rem + 8vw, 11rem);

  /* ---- Radii ---- */
  --r-sm: 0.5rem;
  --r-md: 0.9rem;
  --r-lg: 1.4rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --shadow-glow: 0 0 60px -12px oklch(83% 0.13 79 / 0.35);
  --shadow-card: 0 24px 60px -30px oklch(0% 0 0 / 0.8),
                 0 2px 10px -4px oklch(0% 0 0 / 0.6);
  --shadow-deep: 0 40px 120px -40px oklch(0% 0 0 / 0.9);

  /* ---- Motion ---- */
  --dur-fast:   200ms;
  --dur:        460ms;
  --dur-slow:   1100ms;
  --dur-cinema: 2200ms;
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:   cubic-bezier(0.66, 0, 0.34, 1);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ---- Layout ---- */
  --maxw: 1200px;
  --maxw-narrow: 780px;
  --gutter: clamp(1.25rem, 0.5rem + 4vw, 4rem);
}

/* Reduced-motion users get instant, static states everywhere. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-cinema: 1ms;
  }
}