/* ==========================================================================
   V3 Game — Chrome Mirage
   assets/css/tokens.css
   Design tokens: palette (dark "Machined" + light "Polished"), surface
   recipes, type scale, spacing, radii, easing, z-index ladder.
   Every token gets a value on :root, then is re-declared in both light
   blocks. No colour is ever defined only inside a media query.
   ========================================================================== */

:root {
  color-scheme: dark light;

  /* ── Ground & plate ─────────────────────────────────────────────── */
  --graphite:   #0E1114;
  --graphite-2: #161A1F;
  --plate:      #1D232A;
  --plate-2:    #262E37;
  --groove:     #090B0E;

  /* ── Bevel primitives ───────────────────────────────────────────── */
  --edge-hi:  rgba(255,255,255,0.16);
  --edge-lo:  rgba(0,0,0,0.60);
  --hairline: rgba(255,255,255,0.10);

  /* ── Chrome text ramp ───────────────────────────────────────────── */
  --chrome-hi:  #EDF2F7;
  --chrome-mid: #9CAAB8;
  --chrome-lo:  #63717E;

  /* ── Iridescence ────────────────────────────────────────────────── */
  --iris-1: #6FE9D0;
  --iris-2: #A78BFA;
  --iris-3: #FF9CC8;
  --iris-4: #6FB6FF;
  --jade:   #35E3A4;
  --flare:  #FF8A3D;

  /* Tinted washes — used only for 1px rims and faint plate tints */
  --iris-1-dim: rgba(111,233,208,0.14);
  --iris-4-dim: rgba(111,182,255,0.14);
  --jade-dim:   rgba(53,227,164,0.14);
  --flare-dim:  rgba(255,138,61,0.16);

  /* ── Derived surface recipes ────────────────────────────────────── */
  --iris-rim: linear-gradient(115deg,
                var(--iris-1),
                var(--iris-4) 35%,
                var(--iris-2) 65%,
                var(--iris-3));

  --iris-rail: linear-gradient(90deg,
                var(--iris-1),
                var(--iris-4) 30%,
                var(--iris-2) 62%,
                var(--iris-3));

  --brushed: repeating-linear-gradient(102deg,
               rgba(255,255,255,.020) 0 1px,
               transparent 1px 3px);

  --bevel:   inset 0 1px 0 var(--edge-hi), inset 0 -1px 0 var(--edge-lo);
  --bevel-in: inset 0 1px 0 var(--edge-lo), inset 0 -1px 0 var(--edge-hi);

  --lift:    0 18px 40px -22px rgba(0,0,0,.9), 0 2px 0 rgba(0,0,0,.5);
  --lift-lg: 0 30px 64px -28px rgba(0,0,0,.95), 0 3px 0 rgba(0,0,0,.55);
  --lift-sm: 0 10px 22px -16px rgba(0,0,0,.85), 0 1px 0 rgba(0,0,0,.45);

  /* Specular sweep band — a hard-edged highlight, not a glow */
  --specular: linear-gradient(105deg,
                transparent 0%,
                rgba(255,255,255,0) 38%,
                rgba(255,255,255,.14) 47%,
                rgba(255,255,255,.30) 50%,
                rgba(255,255,255,.14) 53%,
                rgba(255,255,255,0) 62%,
                transparent 100%);

  /* Hairline divider that carries an iridescent segment in the centre */
  --seam: linear-gradient(90deg,
            transparent 0%,
            var(--hairline) 18%,
            var(--iris-1) 44%,
            var(--iris-2) 50%,
            var(--iris-4) 56%,
            var(--hairline) 82%,
            transparent 100%);

  /* ── Type ───────────────────────────────────────────────────────── */
  --font-display: 'Archivo', 'Archivo Expanded', 'Helvetica Neue',
                  'Arial Narrow', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto,
                  'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Menlo,
                  Consolas, 'Liberation Mono', monospace;

  --fs-h1:   clamp(2.4rem, 5.8vw, 4.5rem);
  --fs-h2:   clamp(1.7rem, 3.2vw, 2.7rem);
  --fs-h3:   clamp(1.15rem, 1.7vw, 1.45rem);
  --fs-h4:   clamp(1rem, 1.3vw, 1.15rem);
  --fs-lead: clamp(1.02rem, 1.35vw, 1.2rem);
  --fs-body: 1.0625rem;          /* 17px */
  --fs-sm:   0.9375rem;          /* 15px */
  --fs-xs:   0.8125rem;          /* 13px */
  --fs-kicker: 0.6875rem;        /* 11px */

  --lh-body:  1.65;
  --lh-tight: 1.12;
  --measure:  68ch;

  --track-kicker: 0.16em;
  --track-title:  0.06em;
  --track-display: -0.01em;

  /* ── Spacing ────────────────────────────────────────────────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --gutter:      clamp(16px, 3.2vw, 32px);
  --section-pad: clamp(64px, 8vw, 120px);
  --container:   1200px;

  /* ── Radii ──────────────────────────────────────────────────────── */
  --r-card:  12px;
  --r-panel: 12px;
  --r-input: 10px;
  --r-pill:  999px;
  --r-sm:    8px;
  --chamfer: 14px;

  /* ── Easing & duration ──────────────────────────────────────────── */
  --ease-seat:  cubic-bezier(.2,.8,.2,1);
  --ease-roll:  cubic-bezier(.3,.9,.25,1);
  --ease-press: cubic-bezier(.4,0,.2,1);

  --dur-fast: 140ms;
  --dur-ui:   240ms;
  --dur-mid:  340ms;
  --dur-slow: 420ms;
  --dur-reveal: 520ms;

  /* ── Z-index ladder ─────────────────────────────────────────────── */
  --z-ambient:  0;
  --z-base:     1;
  --z-raised:   5;
  --z-sticky:   40;
  --z-nav:      50;
  --z-drawer:   60;
  --z-cta-bar:  70;
  --z-toast:    80;
  --z-modal:    90;
  --z-progress: 100;
}

/* ==========================================================================
   LIGHT — "Polished" brushed silver.
   Bevel inverts; iridescent hues drop ~12% lightness to hold on a bright
   ground. Declared once for the system preference and once for the
   explicit [data-theme="light"] override.
   ========================================================================== */

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;

    --graphite:   #E4E8EC;
    --graphite-2: #D6DCE2;
    --plate:      #F2F5F8;
    --plate-2:    #FFFFFF;
    --groove:     #C8D0D8;

    --edge-hi:  rgba(255,255,255,0.90);
    --edge-lo:  rgba(0,0,0,0.14);
    --hairline: rgba(14,17,20,0.14);

    --chrome-hi:  #0E1114;
    --chrome-mid: #4A5762;
    --chrome-lo:  #677480;

    --iris-1: #046551;
    --iris-2: #5B21B6;
    --iris-3: #B1004F;
    --iris-4: #0057B0;
    --jade:   #036642;
    --flare:  #983C00;

    --iris-1-dim: rgba(4,101,81,0.16);
    --iris-4-dim: rgba(0,87,176,0.16);
    --jade-dim:   rgba(3,102,66,0.16);
    --flare-dim:  rgba(152,60,0,0.18);

    --brushed: repeating-linear-gradient(102deg,
                 rgba(14,17,20,.020) 0 1px,
                 transparent 1px 3px);

    --lift:    0 18px 38px -24px rgba(24,34,44,.42), 0 1px 0 rgba(24,34,44,.10);
    --lift-lg: 0 30px 60px -30px rgba(24,34,44,.50), 0 2px 0 rgba(24,34,44,.12);
    --lift-sm: 0 10px 20px -16px rgba(24,34,44,.36), 0 1px 0 rgba(24,34,44,.08);

    --specular: linear-gradient(105deg,
                  transparent 0%,
                  rgba(255,255,255,0) 38%,
                  rgba(255,255,255,.45) 47%,
                  rgba(255,255,255,.85) 50%,
                  rgba(255,255,255,.45) 53%,
                  rgba(255,255,255,0) 62%,
                  transparent 100%);
  }
}

[data-theme="light"] {
  color-scheme: light;

  --graphite:   #E4E8EC;
  --graphite-2: #D6DCE2;
  --plate:      #F2F5F8;
  --plate-2:    #FFFFFF;
  --groove:     #C8D0D8;

  --edge-hi:  rgba(255,255,255,0.90);
  --edge-lo:  rgba(0,0,0,0.14);
  --hairline: rgba(14,17,20,0.14);

  --chrome-hi:  #0E1114;
  --chrome-mid: #4A5762;
  --chrome-lo:  #677480;

  --iris-1: #046551;
  --iris-2: #5B21B6;
  --iris-3: #B1004F;
  --iris-4: #0057B0;
  --jade:   #036642;
  --flare:  #983C00;

  --iris-1-dim: rgba(4,101,81,0.16);
  --iris-4-dim: rgba(0,87,176,0.16);
  --jade-dim:   rgba(3,102,66,0.16);
  --flare-dim:  rgba(152,60,0,0.18);

  --brushed: repeating-linear-gradient(102deg,
               rgba(14,17,20,.020) 0 1px,
               transparent 1px 3px);

  --lift:    0 18px 38px -24px rgba(24,34,44,.42), 0 1px 0 rgba(24,34,44,.10);
  --lift-lg: 0 30px 60px -30px rgba(24,34,44,.50), 0 2px 0 rgba(24,34,44,.12);
  --lift-sm: 0 10px 20px -16px rgba(24,34,44,.36), 0 1px 0 rgba(24,34,44,.08);

  --specular: linear-gradient(105deg,
                transparent 0%,
                rgba(255,255,255,0) 38%,
                rgba(255,255,255,.45) 47%,
                rgba(255,255,255,.85) 50%,
                rgba(255,255,255,.45) 53%,
                rgba(255,255,255,0) 62%,
                transparent 100%);
}

/* Explicit dark override — mirrors :root so the toggle wins both ways. */
[data-theme="dark"] {
  color-scheme: dark;

  --graphite:   #0E1114;
  --graphite-2: #161A1F;
  --plate:      #1D232A;
  --plate-2:    #262E37;
  --groove:     #090B0E;

  --edge-hi:  rgba(255,255,255,0.16);
  --edge-lo:  rgba(0,0,0,0.60);
  --hairline: rgba(255,255,255,0.10);

  --chrome-hi:  #EDF2F7;
  --chrome-mid: #9CAAB8;
  --chrome-lo:  #63717E;

  --iris-1: #6FE9D0;
  --iris-2: #A78BFA;
  --iris-3: #FF9CC8;
  --iris-4: #6FB6FF;
  --jade:   #35E3A4;
  --flare:  #FF8A3D;

  --iris-1-dim: rgba(111,233,208,0.14);
  --iris-4-dim: rgba(111,182,255,0.14);
  --jade-dim:   rgba(53,227,164,0.14);
  --flare-dim:  rgba(255,138,61,0.16);

  --brushed: repeating-linear-gradient(102deg,
               rgba(255,255,255,.020) 0 1px,
               transparent 1px 3px);

  --lift:    0 18px 40px -22px rgba(0,0,0,.9), 0 2px 0 rgba(0,0,0,.5);
  --lift-lg: 0 30px 64px -28px rgba(0,0,0,.95), 0 3px 0 rgba(0,0,0,.55);
  --lift-sm: 0 10px 22px -16px rgba(0,0,0,.85), 0 1px 0 rgba(0,0,0,.45);

  --specular: linear-gradient(105deg,
                transparent 0%,
                rgba(255,255,255,0) 38%,
                rgba(255,255,255,.14) 47%,
                rgba(255,255,255,.30) 50%,
                rgba(255,255,255,.14) 53%,
                rgba(255,255,255,0) 62%,
                transparent 100%);
}