/* ============================================================================
 *  tokens.css — design system for Above All Hair Studio & Spa (Hampton, VA).
 *  Builds on generated brand.css. OKLCH throughout. Identity: deep aubergine
 *  ink, warm cream ground, rich plum for action, antique bronze for fine
 *  detail + stars, soft blush wash. Display face: Syne (variable).
 * ========================================================================== */

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

:root {
  /* ---- Colour (brand.css supplies --ink/--bg/--muted/--accent/--accent-text) ---- */
  --canvas:        var(--bg);                    /* warm cream page ground */
  --ink-1:         var(--ink);                   /* deep aubergine text */

  --surface:       oklch(98.8% 0.006 80);        /* cards lift gently off cream */
  --surface-sink:  oklch(94.2% 0.013 60);        /* faintly warm sunk panel */

  --plum:          var(--accent);                /* rich plum — primary action */
  --plum-deep:     oklch(26% 0.075 350);         /* dark plum — moody panels (CTA band, footer) */
  --plum-700:      oklch(41% 0.105 350);         /* plum legible as link text on cream (~6:1) */
  --plum-200:      oklch(90% 0.030 350);         /* plum tint — soft borders */
  --plum-100:      oklch(95.5% 0.014 350);       /* plum wash */

  --blush:         oklch(95.2% 0.018 20);        /* soft blush section tint */
  --blush-deep:    oklch(90% 0.034 18);          /* blush border / selection */

  --bronze:        oklch(64% 0.090 72);          /* decorative bronze — rules, dots, stars */
  --bronze-ink:    oklch(46% 0.078 66);          /* bronze that reads as text (~5:1 on cream) */
  --star:          oklch(64% 0.105 75);          /* warm bronze-gold stars */

  --line:          oklch(89% 0.010 60);          /* warm hairline */
  --line-strong:   oklch(82% 0.016 55);

  --on-dark:       oklch(96% 0.012 60);          /* text on plum-deep panels */
  --on-dark-muted: oklch(82% 0.028 350);         /* secondary text on plum-deep */
  --on-dark-line:  oklch(40% 0.060 350);         /* hairline on plum-deep */

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Syne', '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.42rem);
  --step-2:  clamp(1.44rem, 1.31rem + 0.64vw, 1.92rem);
  --step-3:  clamp(1.73rem, 1.52rem + 1.03vw, 2.59rem);
  --step-4:  clamp(2.07rem, 1.74rem + 1.66vw, 3.50rem);
  --step-5:  clamp(2.49rem, 1.97rem + 2.58vw, 4.73rem);
  --step-6:  clamp(2.99rem, 2.05rem + 4.66vw, 6.85rem);

  /* ---- 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.55rem + 2.17vw, 6.00rem);
  --space-3xl: clamp(5.50rem, 4.77rem + 3.59vw, 8.50rem);

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

  --shadow-1:
    0 1px 2px oklch(23% 0.045 350 / 0.05),
    0 6px 16px oklch(23% 0.045 350 / 0.06);
  --shadow-2:
    0 2px 6px oklch(23% 0.045 350 / 0.07),
    0 16px 34px oklch(23% 0.045 350 / 0.11),
    0 40px 64px oklch(23% 0.045 350 / 0.08);
  --shadow-plum: 0 14px 34px oklch(38% 0.105 350 / 0.30);

  /* Full-bleed gutter — the page uses the whole screen; text stays ~64ch. */
  --gutter: clamp(1.25rem, 4.5vw, 5.5rem);
  --container: 1320px;        /* soft cap for wide content rows only */
  --measure: 64ch;            /* reading measure for body copy */

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