/* ============================================================================
 *  tokens.css — design system for Sure Sound (Hampton car audio & window tint).
 *  Builds on generated brand.css. Theme: NEON GARAGE.
 *  A graphite near-black shop floor lit by an electric-azure "amp glow", with a
 *  hot-magenta spark reserved for the equalizer / spectrum motif. OKLCH
 *  throughout; dark UI, glass surfaces, restrained neon. Distinct on purpose
 *  from the sister demo's gold-on-navy "Supernova" theme.
 * ========================================================================== */

@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: 'Unbounded';
  src: url('/assets/fonts/unbounded.woff2') format('woff2');
  font-weight: 300 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour — brand.css supplies --ink / --bg / --muted / --accent ----- */
  --graphite:      var(--bg);                       /* shop-floor near-black */
  --graphite-deep: oklch(10.5% 0.012 262);          /* deeper pockets / footer */
  --graphite-rise: oklch(18% 0.016 262);            /* faintly lifted band */

  --surface:       oklch(20% 0.018 262);            /* solid lifted panel */
  --surface-2:     oklch(24.5% 0.022 262);          /* hover / nested */
  --glass:         oklch(34% 0.024 262 / 0.32);     /* floating glass card */
  --glass-strong:  oklch(42% 0.03 262 / 0.42);

  --line:          oklch(80% 0.02 262 / 0.14);      /* hairline on dark */
  --line-strong:   oklch(86% 0.03 262 / 0.26);

  /* Spectrum — azure core, magenta/violet sparks (the equalizer gradient) */
  --azure:         var(--accent);                   /* oklch(70% .17 248) — core / CTAs */
  --azure-soft:    oklch(77% 0.145 246);            /* hover lift */
  --azure-ink:     oklch(81% 0.13 244);             /* azure that reads as link text on dark */
  --violet:        oklch(62% 0.21 300);             /* spectrum midpoint / glow */
  --magenta:       oklch(66% 0.24 352);             /* spectrum end / spark only */
  --magenta-ink:   oklch(76% 0.18 352);

  --accent-text:   var(--accent-text, oklch(16% 0.03 250)); /* dark ink on azure */
  --star:          var(--azure);

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', '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.40rem, 1.28rem + 0.58vw, 1.78rem);
  --step-3:  clamp(1.66rem, 1.47rem + 0.92vw, 2.34rem);
  --step-4:  clamp(1.96rem, 1.69rem + 1.34vw, 3.02rem);
  --step-5:  clamp(2.33rem, 1.93rem + 1.98vw, 3.86rem);
  --step-6:  clamp(2.70rem, 2.04rem + 3.30vw, 5.30rem);

  /* ---- 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-azure:    0 0 0 1px oklch(70% 0.17 248 / 0.30), 0 10px 34px oklch(70% 0.17 248 / 0.42);
  --glow-azure-sm: 0 0 22px oklch(72% 0.16 248 / 0.45);
  --glow-magenta:  0 0 26px oklch(66% 0.24 352 / 0.40);

  --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);
}