/* ============================================================================
 *  tokens.css — design system for Nail Luv Salon (Hampton nail salon).
 *  Builds on generated brand.css. OKLCH. Fresh, polished jewel-tone identity:
 *  deep emerald ink, warm porcelain cream ground, a coral lacquer pop for the
 *  fine detail (stars, swatches, underlines). Display face: Gantari.
 * ========================================================================== */

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

:root {
  /* ---- Colour (brand.css supplies --ink/--bg/--muted/--accent) ---------- */
  --cream:        var(--bg);                     /* warm porcelain ground */
  --ink-2:        oklch(36% 0.03 168);           /* softened ink for long copy */

  --surface:      oklch(99.2% 0.005 120);        /* cards lift off cream */
  --surface-sink: oklch(94.6% 0.015 150);        /* faintly cool-green sunk panel */

  --emerald:      var(--accent);                 /* deep emerald — CTAs */
  --emerald-700:  oklch(42% 0.10 162);           /* emerald text/links on cream (≈5.8:1) */
  --emerald-300:  oklch(78% 0.06 162);           /* soft emerald — borders */
  --emerald-100:  oklch(93.5% 0.03 162);         /* emerald wash — section tint */
  --emerald-50:   oklch(96.6% 0.015 162);

  --coral:        oklch(72% 0.155 38);           /* decorative coral (rules, dots, stars) */
  --coral-ink:    oklch(53% 0.16 32);            /* coral that's legible as text (≈4.8:1) */
  --coral-100:    oklch(93% 0.05 42);            /* coral wash — avatars */

  --line:         oklch(89% 0.012 150);          /* cool hairline */
  --line-strong:  oklch(81% 0.02 150);
  --star:         var(--coral);                  /* coral stars */

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Gantari', '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: 8px;
  --r:    var(--radius, 12px);
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  --shadow-1:
    0 1px 1px oklch(30% 0.03 168 / 0.05),
    0 4px 12px oklch(30% 0.03 168 / 0.07);
  --shadow-2:
    0 2px 4px oklch(30% 0.03 168 / 0.06),
    0 14px 28px oklch(30% 0.03 168 / 0.10),
    0 32px 54px oklch(30% 0.03 168 / 0.08);
  --shadow-cta: 0 10px 30px oklch(46% 0.11 160 / 0.30);

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

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