/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — Muze Vape · "Daylight / Kiosk"

   SYSTEM IN ONE LINE
   · Neutral chrome — pure WHITE (Daylight) and near-BLACK (Kiosk) grounds.
   · Exactly ONE vivid colour per page, injected at the page root as
     --brand / --brand-2 (see inc/class-tv-brand-colors.php).
   · Two visual languages selected by [data-theme="light"|"dark"] on the root.
     :root defaults to light, so the store stays light unless asked otherwise.
   · A .tv-invert band flips to the OPPOSITE ground of the page it sits in,
     which is how the hero and the trust band read as black on a white page.
   · Type: Archivo (display / tabular numerals), Hanken Grotesk (body),
     Space Mono (technical labels, spec kickers, legal copy).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── DAYLIGHT (light) — the default ground ─────────────────────────────── */
:root,
[data-theme="light"],
[data-theme="dark"] .tv-invert {
  /* SUBSTRATE */
  --tv-paper:        #FFFFFF;
  --tv-paper-deep:   #F4F4F2;
  --tv-paper-warm:   #EDEDEA;
  --tv-surf-solid:   #FFFFFF;
  --tv-page-bg:      #FFFFFF;

  /* INK */
  --tv-ink:          #0B0B0D;
  --tv-ink-2:        #44454C;
  --tv-ink-3:        #76777F;
  --tv-ink-4:        #A3A4AB;
  --tv-hair:         rgba(11, 11, 13, 0.10);
  --tv-hair-2:       rgba(11, 11, 13, 0.16);
  --tv-on-accent:    #FFFFFF;

  /* GLASS — opaque white cards with a hairline; no blur in Daylight */
  --tv-glass:        #FFFFFF;
  --tv-glass-deep:   #F7F7F5;
  --tv-glass-edge:   rgba(11, 11, 13, 0.10);
  --tv-glass-blur:   none;
  --tv-glass-shadow: 0 1px 2px rgba(11,11,13,.05), 0 12px 28px -18px rgba(11,11,13,.18);

  /* BRAND — house default (Ember, a warm orange-red); overridden per page
     root by the brand-colour map. Both values are chosen to clear WCAG AA
     where the system uses them: --brand carries white button text AND is
     read as text on white (5.18:1), and --brand-2 is read on the Kiosk
     ground (5.31:1). Swap them only as a pair, and re-check both ratios. */
  --brand:           #C2410C;
  --brand-2:         #CE673D;
  --brand-ink:       var(--brand);
  --brand-tile:      color-mix(in srgb, var(--brand) 12%, #FFFFFF);
  --brand-soft:      color-mix(in srgb, var(--brand)  8%, #FFFFFF);

  /* SIGNAL */
  --tv-signal-ok:    #1AA35A;
  --tv-signal-warn:  #C97A12;
  --tv-signal-err:   #DC2A2A;
  --tv-signal-info:  #2563EB;
  --tv-red:          #DC2A2A;
}

/* ── KIOSK (dark) — near-black ground, bright brand tiles, heavier type ── */
/* The footer is grounded in Kiosk on a Daylight page — the whole block, not
   just a background colour, so its links, hairlines and brand accents resolve
   against the dark ground instead of being individually overridden. In Kiosk
   the page is already this colour, so the footer lifts a step instead (see
   chrome.css) rather than flipping to white and shouting at the reader. */
[data-theme="dark"],
[data-theme="light"] .tv-invert,
:root:not([data-theme="dark"]) .tv-ftr {
  --tv-paper:        #0A0A0B;
  --tv-paper-deep:   #141417;
  --tv-paper-warm:   #1A1A1E;
  --tv-surf-solid:   #141417;
  --tv-page-bg:      #0A0A0B;

  --tv-ink:          #F6F6F8;
  --tv-ink-2:        #A6A7B0;
  --tv-ink-3:        #74757E;
  --tv-ink-4:        #54555E;
  --tv-hair:         rgba(255, 255, 255, 0.11);
  --tv-hair-2:       rgba(255, 255, 255, 0.18);
  --tv-on-accent:    #0A0A0B;

  --tv-glass:        #141417;
  --tv-glass-deep:   #1C1C20;
  --tv-glass-edge:   rgba(255, 255, 255, 0.12);
  --tv-glass-blur:   none;
  --tv-glass-shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 24px 60px -30px rgba(0,0,0,.8);

  /* On black the mid-tone brand goes muddy — promote the lighter --brand-2. */
  --brand-ink:       var(--brand-2);
  --brand-tile:      color-mix(in srgb, var(--brand-2) 26%, #0A0A0B);
  --brand-soft:      color-mix(in srgb, var(--brand-2) 14%, #0A0A0B);

  --tv-signal-ok:    #36D17E;
  --tv-signal-warn:  #F0B23A;
  --tv-signal-err:   #FF6B6B;
  --tv-signal-info:  #5B9BFF;
  --tv-red:          #FF6B6B;
}

/* The footer uses the two dimmest inks for its tagline and legal paragraph —
   small text that still has to be readable. At their stock Kiosk values they
   measure 4.32:1 and 2.67:1 against the near-black ground, both under AA.
   (The white footer this replaced was no better: 4.45:1 and 2.48:1.) Promoted
   here to 6.5:1 and 5.4:1, scoped to the footer so the rest of Kiosk keeps its
   intended weighting. Declared after the block above, and matching its
   specificity, so it wins on both grounds. */
[data-theme="dark"] .tv-ftr,
:root:not([data-theme="dark"]) .tv-ftr {
  --tv-ink-3: #91939C;
  --tv-ink-4: #84858F;
}

/* ── Ground-independent scales ─────────────────────────────────────────── */
:root {
  /* TYPE STACKS */
  --tv-font-display: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tv-font-body:    "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tv-font-mono:    "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* TYPE SCALE */
  --tv-fs-h1-xl: 84px;
  --tv-fs-h1:    52px;
  --tv-fs-h2:    34px;
  --tv-fs-h3:    24px;
  --tv-fs-h4:    19px;
  --tv-fs-lead:  19px;
  --tv-fs-body:  16px;
  --tv-fs-small: 13px;
  --tv-fs-micro: 11px;

  /* LINE HEIGHTS */
  --tv-lh-tight: 1.02;
  --tv-lh-snug:  1.18;
  --tv-lh-body:  1.6;
  --tv-lh-loose: 1.72;

  /* TRACKING */
  --tv-tr-display: -0.02em;
  --tv-tr-body:     0em;
  --tv-tr-mono:     0.14em;

  /* RADII — Daylight is rounded/premium; Kiosk tightens them below. */
  --tv-r-xs:   6px;
  --tv-r-sm:   10px;
  --tv-r-md:   16px;
  --tv-r-lg:   20px;
  --tv-r-xl:   28px;
  --tv-r-pill: 999px;

  /* SPACING */
  --tv-s-1:  4px;  --tv-s-2:  8px;  --tv-s-3: 12px; --tv-s-4: 16px;
  --tv-s-5: 20px;  --tv-s-6: 24px;  --tv-s-8: 32px; --tv-s-10: 40px;
  --tv-s-12: 48px; --tv-s-16: 64px; --tv-s-20: 80px;

  /* LAYOUT */
  --tv-max-w:    1200px;
  --tv-max-w-nb:  860px;   /* narrow band: prose, checkout, legal */
  --tv-pad-x:     40px;
  --tv-pad-x-md:  32px;
  --tv-pad-x-sm:  20px;

  /* ELEVATION */
  --tv-elev-1: 0 1px 2px rgba(11,11,13,.06);
  --tv-elev-2: 0 12px 30px -18px rgba(11,11,13,.20);
  --tv-elev-3: 0 30px 70px -30px rgba(11,11,13,.28);

  /* MOTION */
  --tv-ease:     cubic-bezier(.2, .8, .25, 1);
  --tv-ease-out: cubic-bezier(.16, 1, .3, 1);
  --tv-dur-fast: 110ms;
  --tv-dur-base: 190ms;
  --tv-dur-slow: 300ms;

  /* Z-LAYERS */
  --tv-z-base: 0;  --tv-z-sticky: 10; --tv-z-overlay: 20;
  --tv-z-modal: 40; --tv-z-toast: 60;
}

/* Kiosk reads harder-edged, closer to retail signage. */
[data-theme="dark"] {
  --tv-r-lg: 12px;
  --tv-r-md: 10px;
  --tv-r-sm:  8px;
}

/* Narrower gutters as the viewport tightens. */
@media (max-width: 1024px) { :root { --tv-pad-x: var(--tv-pad-x-md); } }
@media (max-width:  640px) { :root { --tv-pad-x: var(--tv-pad-x-sm); } }

/* Fluid display type — the 84px hero would otherwise overflow a phone. */
@media (max-width: 1024px) {
  :root { --tv-fs-h1-xl: 60px; --tv-fs-h1: 42px; --tv-fs-h2: 28px; --tv-fs-h3: 21px; }
}
@media (max-width: 640px) {
  :root { --tv-fs-h1-xl: 40px; --tv-fs-h1: 32px; --tv-fs-h2: 24px; --tv-fs-lead: 17px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --tv-dur-fast: 0ms; --tv-dur-base: 0ms; --tv-dur-slow: 0ms; }
}