/* ============================================================================
 *  tokens.css — design system for Amazing Cuts (Yorktown hair salon).
 *  Builds on generated brand.css. OKLCH. Modern unisex craft-salon identity:
 *  warm espresso ink, oat ground, deep teal accent, brass for fine detail.
 * ========================================================================== */

@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: 'Bricolage Grotesque';
  src: url('/assets/fonts/bricolage-var.woff2') format('woff2');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour (brand.css supplies --ink/--bg/--muted/--accent) ---------- */
  --oat:          var(--bg);
  --espresso:     var(--ink);
  --surface:      oklch(98.6% 0.008 83);        /* cards lift off oat */
  --surface-sink: oklch(94.5% 0.012 90);        /* faintly warm sunk panel */

  --clay:         var(--accent);                /* warm clay-red — CTAs */
  --clay-700:     oklch(44% 0.135 33);          /* clay text/links on oat (≈6:1) */
  --clay-300:     oklch(74% 0.09 36);           /* soft clay — borders */
  --clay-100:     oklch(93% 0.035 42);          /* clay wash — section tint */
  --clay-50:      oklch(96.8% 0.016 48);

  --brass:        oklch(72% 0.10 76);           /* decorative brass (rules, dots, stars) */
  --brass-ink:    oklch(52% 0.085 68);          /* brass that's legible as text (≈4.7:1) */

  --line:         oklch(88% 0.012 78);          /* warm hairline */
  --line-strong:  oklch(80% 0.018 78);
  --star:         oklch(72% 0.10 76);           /* brass stars */

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Bricolage Grotesque', '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.20rem + 3.95vw, 6.10rem);

  /* ---- 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 / layout / motion -------------------------------- */
  --r-sm: 6px;
  --r:    var(--radius, 10px);
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  --shadow-1:
    0 1px 1px oklch(24% 0.018 70 / 0.05),
    0 4px 10px oklch(24% 0.018 70 / 0.06);
  --shadow-2:
    0 2px 4px oklch(24% 0.018 70 / 0.06),
    0 12px 26px oklch(24% 0.018 70 / 0.10),
    0 30px 50px oklch(24% 0.018 70 / 0.07);
  --shadow-clay: 0 10px 30px oklch(50% 0.15 33 / 0.28);

  --container: 1180px;
  --container-wide: 1320px;
  --measure: 64ch;

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