/* ============================================================================
 *  tokens.css — design system for Hampton Roads Customs.
 *  Industrial garage identity: gunmetal ground, steel panels, racing-red accent,
 *  condensed Big Shoulders Display headlines over Inter body.
 *  Brand colors arrive from brand.css (--bg --ink --muted --accent ...); this
 *  layer extends them into a full palette + scales. No @import, no @layer —
 *  cascade is controlled by <link> order in index.html.
 * ========================================================================== */

@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: 'Big Shoulders Display';
  src: url('/assets/fonts/bigshoulders-var.woff2') format('woff2');
  font-weight: 300 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Fonts (--font comes from brand.css) ------------------------------ */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', 'Inter', system-ui, sans-serif;

  /* ---- Surfaces (built up from the gunmetal --bg) ----------------------- */
  --char:          var(--bg);                  /* page ground            */
  --surface:       oklch(24.5% 0.014 256);     /* primary panel          */
  --surface-2:     oklch(27.5% 0.015 256);     /* raised card            */
  --surface-sink:  oklch(17.5% 0.013 256);     /* recessed band (darker) */
  --surface-glass: oklch(22% 0.013 256 / 0.78);/* sticky header          */

  /* ---- Lines / hairlines ----------------------------------------------- */
  --line:        oklch(33% 0.012 256);
  --line-strong: oklch(44% 0.013 256);
  --line-soft:   oklch(28% 0.012 256);

  /* ---- Racing red (accent) + scale ------------------------------------- */
  --red:        var(--accent);                 /* button bg, white text AA */
  --red-bright: oklch(67% 0.205 28);           /* text/icon highlight on dark */
  --red-deep:   oklch(48% 0.185 27);           /* pressed / hover bg     */
  --red-wash:   oklch(55% 0.205 27 / 0.14);    /* tint fills             */
  --red-line:   oklch(55% 0.205 27 / 0.42);

  /* ---- Steel + accents -------------------------------------------------- */
  --steel:      oklch(72% 0.018 252);          /* cool grey labels        */
  --steel-dim:  oklch(60% 0.015 252);          /* decorative only         */
  --star:       oklch(82% 0.135 79);           /* warm amber rating star  */
  --on-red:     var(--accent-text);

  /* ---- Type scale (fluid) ---------------------------------------------- */
  --step--2: clamp(0.78rem, 0.76rem + 0.10vw, 0.84rem);
  --step--1: clamp(0.88rem, 0.85rem + 0.14vw, 0.95rem);
  --step-0:  clamp(1.02rem, 0.99rem + 0.18vw, 1.10rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.34vw, 1.40rem);
  --step-2:  clamp(1.45rem, 1.33rem + 0.60vw, 1.85rem);
  --step-3:  clamp(1.90rem, 1.65rem + 1.25vw, 2.85rem);
  --step-4:  clamp(2.45rem, 2.00rem + 2.25vw, 4.10rem);
  --step-5:  clamp(3.05rem, 2.30rem + 3.75vw, 5.75rem);
  --step-6:  clamp(3.60rem, 2.55rem + 5.25vw, 7.50rem);

  /* ---- Space scale (fluid) --------------------------------------------- */
  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.30rem);
  --space-2xs: clamp(0.50rem, 0.47rem + 0.15vw, 0.62rem);
  --space-xs:  clamp(0.75rem, 0.70rem + 0.25vw, 0.95rem);
  --space-s:   clamp(1.00rem, 0.92rem + 0.40vw, 1.30rem);
  --space-m:   clamp(1.50rem, 1.36rem + 0.70vw, 2.00rem);
  --space-l:   clamp(2.10rem, 1.85rem + 1.25vw, 3.00rem);
  --space-xl:  clamp(3.00rem, 2.55rem + 2.25vw, 4.60rem);
  --space-2xl: clamp(4.20rem, 3.40rem + 4.00vw, 7.00rem);
  --space-3xl: clamp(5.50rem, 4.20rem + 6.50vw, 9.50rem);

  /* ---- Layout ----------------------------------------------------------- */
  --gutter:          clamp(1.25rem, 4.5vw, 5.5rem);
  --container:       1240px;
  --container-wide:  1480px;
  --measure:         64ch;
  --header-h:        4.75rem;

  /* ---- Radii ------------------------------------------------------------ */
  --r-sm: 4px;
  --r:    var(--radius, 7px);
  --r-lg: 14px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* ---- Shadows / glow (subtle on dark) --------------------------------- */
  --shadow-1: 0 1px 0 oklch(100% 0 0 / 0.04), 0 12px 28px oklch(0% 0 0 / 0.38);
  --shadow-2: 0 2px 0 oklch(100% 0 0 / 0.05), 0 26px 60px oklch(0% 0 0 / 0.50);
  --glow-red: 0 14px 34px oklch(55% 0.205 27 / 0.34);

  /* ---- Motion ----------------------------------------------------------- */
  --dur:      220ms;
  --dur-slow: 560ms;
  --ease:     cubic-bezier(0.22, 0.61, 0.36, 1);

  color-scheme: dark;
}