/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKENS: the only values the site is allowed to use.
   Spec: DESIGN.md (approved v3.3, Oct 2026). When this file and the
   spec disagree, one of them is a bug: fix both in the same change.

   Rules (enforced by checks/ once they exist):
   - Colours, font families, font sizes and transition durations in
     any stylesheet or page must come from a token below. A colour
     that isn't a token isn't a colour.
   - Spacing, radius and shadow should use tokens too; one-off layout
     numbers (widths, offsets) are allowed with a comment saying why.

   Names are prefixed (--color-*, --text-*, ...). They replaced the old
   site.css tokens (--ink, --pink, ...), retired Oct 17, 2026.
═══════════════════════════════════════════════════════════════ */

:root {
  /* ─── Colour ────────────────────────────────────────────────
     Contrast measured against WCAG 2.2 (text pairs need 4.5:1):
     ink        on bg 17.5 · surface 18.0 · panel 16.2
     ink-2      on bg  9.6 · surface  9.9
     ink-3      on bg  5.7 · surface  5.8
     accent     on bg  5.2 · surface  5.4   (links, emphasis, small marks)
     on-dark    on ink 18.0                 (dark band, ink buttons)
     on-dark-2  on ink 10.4
     accent-bright on ink 5.4               (accent on dark only; never text on light: 3.2:1)
     on-dark    on accent 5.4               (button hover)
     ink        on accent-soft 14.9         (nav hover)
     line / line-strong are non-text dividers (1.2:1 / 1.5:1). */
  --color-bg:            #FFFBF8;  /* page */
  --color-surface:       #FFFFFF;  /* cards, quotes, sticky nav sits on bg */
  --color-panel:         #F7F2EF;  /* image panel inside case cards */
  --color-ink:           #1D1320;  /* text, dark band, primary button */
  --color-ink-2:         #4B3F4E;  /* secondary text */
  --color-ink-3:         #6E6170;  /* labels, captions, meta */
  --color-on-dark:       #FFFFFF;  /* text on ink */
  --color-on-dark-2:     #C6C4C7;  /* secondary text on ink */
  --color-line:          #EFE4E2;  /* hairlines, card borders */
  --color-line-strong:   #DCCFCC;  /* card border on hover */
  --color-accent:        #C8285A;  /* the one accent: links, emphasis word, numbers' + and % */
  --color-accent-bright: #F0567F;  /* accent on dark backgrounds; small dots */
  --color-accent-soft:   #FFE3EA;  /* hover fills, text selection */

  /* Shadows (ink at low alpha; the only rgba allowed, kept here) */
  --shadow-sm:    0 1px 2px rgba(29, 19, 32, 0.05);
  --shadow-photo: 0 1px 2px rgba(29, 19, 32, 0.05), 0 24px 48px -32px rgba(29, 19, 32, 0.35);
  --shadow-image: 0 24px 48px -28px rgba(29, 19, 32, 0.5);
  --shadow-hover: 0 1px 2px rgba(29, 19, 32, 0.04), 0 20px 40px -28px rgba(29, 19, 32, 0.3);
  --chip-fill:    rgba(255, 255, 255, 0.75); /* chip on card or panel */
  --chip-border:  rgba(29, 19, 32, 0.1);

  /* ─── Type ──────────────────────────────────────────────────
     Three families, one job each. Geist for everything people read,
     Geist Mono for evidence (labels, methods, n=), Caveat once: the
     photo caption. Weights: 400 / 500 / 600 only. */
  --font-sans:  'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-hand:  'Caveat', 'Bradley Hand', cursive;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* Type scale: eleven steps. Six fixed, five fluid between 360px and
     1440px viewports. Every font-size on the site is one of these. */
  --text-2xs:  0.6875rem;  /* 11  chips */
  --text-xs:   0.75rem;    /* 12  mono labels */
  --text-sm:   0.9375rem;  /* 15  captions, meta, nav, buttons */
  --text-base: 1.0625rem;  /* 17  body */
  --text-md:   1.125rem;   /* 18  testimonial text */
  --text-lg:   1.25rem;    /* 20  logo, photo caption */
  --text-lead: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);    /* 19–24  hero intro, contact text */
  --text-h3:   clamp(1.375rem, 1.2rem + 0.7vw, 1.75rem);     /* 22–28  card titles, outcomes */
  --text-stat: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);       /* 28–40  metrics */
  --text-h2:   clamp(1.875rem, 1.45rem + 1.7vw, 2.875rem);   /* 30–46  section titles */
  --text-h1:   clamp(2.625rem, 1.75rem + 3.6vw, 4.75rem);    /* 42–76  hero only */

  --leading-tight: 1;      /* h1, numbers */
  --leading-head:  1.08;   /* h2, h3 */
  --leading-lead:  1.45;   /* intro, quotes */
  --leading-body:  1.6;

  --tracking-display: -0.035em; /* h1, stats */
  --tracking-head:    -0.03em;  /* h2, h3, logo */
  --tracking-label:   0.06em;   /* mono caps */

  /* ─── Space (8px base) ─────────────────────────────────────── */
  --space-1: 0.5rem;   /*   8 */
  --space-2: 1rem;     /*  16 */
  --space-3: 1.5rem;   /*  24 */
  --space-4: 2rem;     /*  32 */
  --space-5: 3rem;     /*  48 */
  --space-6: 4.5rem;   /*  72 */
  --space-7: 7rem;     /* 112  between sections */

  /* ─── Radius ───────────────────────────────────────────────── */
  --radius-xs:   2px;    /* logo square */
  --radius-sm:   6px;    /* focus ring, small tags */
  --radius-md:   14px;   /* images inside panels */
  --radius-lg:   20px;   /* cards, photo */
  --radius-xl:   28px;   /* quotes, dark band */
  --radius-pill: 999px;  /* buttons, chips */

  /* ─── Layout ───────────────────────────────────────────────── */
  --layout-max:    1200px;
  --layout-gutter: clamp(1rem, 4vw, 3rem);
  --measure:       64ch;
  /* Breakpoints can't be custom properties in media queries; the two
     the site uses are 900px (stack columns) and 560px (phones). */

  /* ─── Motion ───────────────────────────────────────────────
     Four durations, one curve. Everything is off under
     prefers-reduced-motion. */
  --duration-stagger: 80ms;   /* delay between items revealing */
  --duration-fast:    160ms;  /* colour and border changes */
  --duration-base:    300ms;  /* hover movement: arrows, cards */
  --duration-slow:    700ms;  /* scroll reveals, image zoom */
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);
}