/* ============================================================================
 *  tokens.css — design system for Supernova Tobacco & Vape.
 *  Builds on generated brand.css. Theme: DEEP SPACE + SUPERNOVA BURST.
 *  Palette honors the real signage (yellow + lime + electric blue) and the
 *  name: a brilliant gold core, lime/cyan shockwave, violet nebula, on a
 *  near-black navy void. OKLCH throughout. Dark UI, glass surfaces, glow.
 * ========================================================================== */

@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/assets/fonts/space-grotesk-var.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour — brand.css supplies --ink / --bg / --muted / --accent ----- */
  --space:        var(--bg);                      /* deep navy-black void */
  --space-deep:   oklch(11% 0.026 264);           /* deeper pockets / footer */
  --space-rise:   oklch(18.5% 0.032 266);         /* faintly lifted band */

  --surface:      oklch(21% 0.032 265);           /* solid lifted panel */
  --surface-2:    oklch(25.5% 0.038 266);         /* hover / nested */
  --glass:        oklch(34% 0.04 266 / 0.30);      /* floating glass card */
  --glass-strong: oklch(40% 0.05 266 / 0.42);

  --line:         oklch(82% 0.04 266 / 0.14);      /* hairline on dark */
  --line-strong:  oklch(85% 0.05 266 / 0.26);

  /* Supernova spectrum */
  --gold:         var(--accent);                  /* oklch(83% .165 88) — core / CTAs */
  --gold-soft:    oklch(89% 0.12 92);
  --lime:         oklch(87% 0.205 128);           /* signage lime — highlights */
  --lime-ink:     oklch(90% 0.16 128);
  --cyan:         oklch(80% 0.13 222);            /* signage blue — links/accents */
  --cyan-ink:     oklch(84% 0.12 220);
  --violet:       oklch(62% 0.20 318);            /* nebula glow only */
  --magenta:      oklch(66% 0.23 352);            /* burst glow only */

  --accent-text:  var(--accent-text, oklch(20% 0.04 90)); /* dark ink on gold */
  --star:         var(--gold);

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;

  --step--1: clamp(0.833rem, 0.80rem + 0.16vw, 0.92rem);
  --step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.075rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.40rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.48rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.45vw, 3.30rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.24vw, 4.39rem);
  --step-6:  clamp(2.99rem, 2.10rem + 4.20vw, 6.40rem);

  /* ---- Space ------------------------------------------------------------ */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.31rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.11vw, 0.625rem);
  --space-xs:  clamp(0.75rem, 0.71rem + 0.16vw, 0.94rem);
  --space-s:   clamp(1.00rem, 0.95rem + 0.22vw, 1.25rem);
  --space-m:   clamp(1.50rem, 1.42rem + 0.33vw, 1.875rem);
  --space-l:   clamp(2.00rem, 1.89rem + 0.54vw, 2.50rem);
  --space-xl:  clamp(3.00rem, 2.78rem + 1.09vw, 4.00rem);
  --space-2xl: clamp(4.00rem, 3.67rem + 1.63vw, 5.50rem);
  --space-3xl: clamp(6.00rem, 5.45rem + 2.72vw, 8.00rem);

  /* ---- Radius / shadow / glow / layout / motion ------------------------- */
  --r-sm: 8px;
  --r:    var(--radius, 14px);
  --r-lg: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px oklch(0% 0 0 / 0.4), 0 8px 24px oklch(0% 0 0 / 0.35);
  --shadow-2: 0 2px 6px oklch(0% 0 0 / 0.45), 0 24px 60px oklch(0% 0 0 / 0.45);

  --glow-gold:    0 0 0 1px oklch(83% 0.165 88 / 0.25), 0 8px 30px oklch(80% 0.16 85 / 0.40);
  --glow-gold-sm: 0 0 22px oklch(82% 0.16 86 / 0.45);
  --glow-cyan:    0 0 26px oklch(80% 0.13 222 / 0.40);
  --glow-lime:    0 0 26px oklch(87% 0.20 128 / 0.38);

  --container: 1200px;
  --container-wide: 1480px;
  --measure: 64ch;
  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);   /* full-bleed slim gutter */

  --dur: 240ms;
  --dur-slow: 640ms;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}