/* ============================================================================
 *  tokens.css — design system for Taylor's Barber Shop (Hampton, VA).
 *  Builds on generated brand.css. OKLCH. Classic gentleman's-barber identity:
 *  cool graphite ink, warm ivory ground, confident barber-navy, bronze detail.
 *  Display face = Big Shoulders Display (condensed American shop-signage).
 * ========================================================================== */

@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/big-shoulders-display.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
}

:root {
  /* ---- Colour (brand.css supplies --ink/--bg/--muted/--accent) ---------- */
  --ivory:        var(--bg);                    /* warm bone ground */
  --char:         var(--ink);                   /* cool graphite ink */
  --char-deep:    oklch(20% 0.022 262);         /* darkest panel — faint navy cast */
  --char-rise:    oklch(27% 0.024 262);         /* lifted dark surface (cards on dark) */
  --cream:        oklch(93% 0.009 86);          /* text on dark */
  --cream-dim:    oklch(80% 0.012 84);          /* secondary text on dark */

  --surface:      oklch(98.6% 0.005 88);        /* cards lift off ivory */
  --surface-sink: oklch(92.5% 0.009 90);        /* faintly cool sunk panel */

  --navy:         var(--accent);                /* deep barber navy — CTAs */
  --navy-700:     oklch(31% 0.085 256);         /* navy hover / strong link */
  --navy-300:     oklch(66% 0.075 252);         /* soft navy — borders/accents on dark */
  --navy-100:     oklch(91% 0.028 252);         /* navy wash — focus ring / tint */
  --navy-50:      oklch(96.4% 0.013 252);       /* faintest navy section tint */

  --bronze:       oklch(64% 0.10 70);           /* decorative bronze (rules, stripes) */
  --brass:        oklch(74% 0.115 75);          /* brighter brass — stars / pole highlight */
  --brass-soft:   oklch(86% 0.07 78);           /* soft brass on dark */

  --line:         oklch(87% 0.008 90);          /* cool hairline */
  --line-strong:  oklch(79% 0.012 90);
  --star:         var(--brass);

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Big Shoulders Display', 'Arial Narrow', 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.50rem, 1.36rem + 0.66vw, 1.98rem);
  --step-3:  clamp(1.86rem, 1.62rem + 1.18vw, 2.80rem);
  --step-4:  clamp(2.30rem, 1.92rem + 1.90vw, 3.85rem);
  --step-5:  clamp(2.85rem, 2.24rem + 3.05vw, 5.30rem);
  --step-6:  clamp(3.45rem, 2.45rem + 5.00vw, 7.60rem);

  /* ---- 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: 5px;
  --r:    var(--radius, 8px);
  --r-lg: 12px;
  --r-xl: 18px;
  --r-pill: 999px;

  --shadow-1:
    0 1px 1px oklch(24% 0.014 264 / 0.05),
    0 4px 10px oklch(24% 0.014 264 / 0.07);
  --shadow-2:
    0 2px 4px oklch(24% 0.014 264 / 0.06),
    0 12px 26px oklch(24% 0.014 264 / 0.11),
    0 30px 50px oklch(24% 0.014 264 / 0.08);
  --shadow-navy: 0 12px 30px oklch(38% 0.09 256 / 0.30);

  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --container: 1200px;
  --container-wide: 1460px;
  --measure: 64ch;

  /* ---- Signature: barber-pole stripe (tasteful navy/bronze hatch) ------- */
  --pole: repeating-linear-gradient(
            -52deg,
            var(--navy) 0 7px,
            var(--bronze) 7px 14px,
            var(--ivory) 14px 21px);

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