/* ============================================================================
 *  tokens.css — design system for Beautiful Nails Spa.
 *  Builds on the generated brand.css (--ink/--bg/--muted/--accent/--radius).
 *  Palette is OKLCH, pulled from the salon's own lilac nail art.
 * ========================================================================== */

/* ---- Self-hosted variable fonts (OFL) ---------------------------------- */
@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: 'Fraunces';
  src: url('/assets/fonts/fraunces-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Colour (OKLCH) — brand.css provides --ink/--bg/--muted/--accent --- */
  --cream:        var(--bg);                    /* warm page ground */
  --plum:         var(--ink);                   /* deep aubergine text */
  --surface:      oklch(99.4% 0.004 95);        /* cards lifted off cream */
  --surface-sink: oklch(97% 0.008 312);         /* faintly lilac sunk panel */

  --lilac:        var(--accent);                /* grape — CTAs (white text AA) */
  --lilac-700:    oklch(41% 0.123 305);         /* lilac text/links on light (≈7:1) */
  --lilac-500:    oklch(62% 0.16 305);          /* mid lilac — decorative */
  --lilac-300:    oklch(82% 0.075 305);         /* soft lilac — borders/chips */
  --lilac-100:    oklch(93.5% 0.035 307);       /* lilac wash — section tint */
  --lilac-50:     oklch(96.6% 0.018 307);       /* faint lilac wash */

  --line:         oklch(89% 0.012 312);         /* warm hairline */
  --line-strong:  oklch(82% 0.02 312);
  --gold:         oklch(80% 0.072 78);          /* tiny warm star accent */

  /* ---- Type ------------------------------------------------------------- */
  --font:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* fluid scale (1.20 mobile → ~1.28 desktop) */
  --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.31rem + 3.40vw, 5.84rem);

  /* ---- Space (fluid) ---------------------------------------------------- */
  --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: 20px;
  --r-xl: 28px;
  --r-pill: 999px;

  /* layered, soft, tinted-with-plum shadows (never 0 4px 6px rgba(0,0,0,.1)) */
  --shadow-1:
    0 1px 1px oklch(26% 0.035 318 / 0.04),
    0 4px 10px oklch(26% 0.035 318 / 0.05);
  --shadow-2:
    0 2px 4px oklch(26% 0.035 318 / 0.05),
    0 10px 24px oklch(26% 0.035 318 / 0.08),
    0 28px 48px oklch(26% 0.035 318 / 0.06);
  --shadow-lilac:
    0 10px 30px oklch(53% 0.15 305 / 0.28);

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

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