/* Design tokens — single source of truth for the brand 2025 (logo manual + Figma files).
   See PLAN.md §5.3 for where each value comes from. */
:root {
  /* Brand colours (logo manual: white / yellow / black) */
  --c-yellow: #f7de69;
  --c-yellow-hover: #f3d33f;
  --c-yellow-soft: #fcf3c7;
  --c-yellow-deep: #ac8814; /* underlines of text links and list markers: brand yellow, 3.3:1 on white (WCAG 1.4.11) */
  --c-black: #0a0a0a;
  --c-ink: #000;
  --c-white: #fff;
  --c-cream: #fdf9f0;

  /* Neutrals (Figma Make) */
  --c-grey-50: #fafafa;
  --c-grey-100: #f5f5f5;
  --c-grey-200: #f0f0f0;
  --c-grey-300: #ececec;
  --c-grey-400: #bbbbbb;
  --c-grey-500: #6b6b6b; /* was #888 (3.5:1); ≥ 4.5:1 on white and cream for small labels (axe, WCAG AA) */
  --c-grey-600: #666666;
  --c-grey-700: #555555;
  --c-alert: #dc2626;
  --c-success: #15803d;

  /* Semantic */
  --c-text: var(--c-black);
  --c-text-muted: var(--c-grey-600);
  --c-text-subtle: var(--c-grey-500);
  --c-border: var(--c-grey-300);
  --c-surface: var(--c-white);
  --c-surface-alt: var(--c-grey-50);
  --c-focus: var(--c-ink);

  /* Typography */
  --font-heading: 'Zilla Slab', 'Rockwell', Georgia, serif;
  --font-body: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.8vw, 5rem);       /* 40 → 80 (fig: section titles) */
  --fs-h1: clamp(2rem, 1.45rem + 2.4vw, 4rem);              /* 32 → 64 (fig: hero) */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);          /* 26 → 40 */
  --fs-section: min(var(--fs-h1), calc((100vw - 2 * var(--gutter)) / 13.4)); /* home hero + big section titles: H1 scale, shrunk to fit long words on phones */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);           /* 20 → 24 */
  --fs-h4: 1.125rem;
  --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.75rem;
  --fs-eyebrow: clamp(0.8125rem, 0.75rem + 0.2vw, 1rem);     /* 13 → 16, uppercase bold */

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;

  /* Spacing scale (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.25rem;
  --s-6: 1.5rem;
  --s-8: 2rem;
  --s-10: 2.5rem;
  --s-12: 3rem;
  --s-16: 4rem;
  --s-20: 5rem;
  --section-y: clamp(3rem, 2rem + 5vw, 7.5rem);

  /* Layout (fig: 1728 frame, 150px margins → 1428px content) */
  --container: 1428px;
  --container-narrow: 760px;
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);
  --header-h: 64px;

  /* Shape */
  --r-sm: 8px;
  --r-md: 12px;          /* inputs, date options, notices (buttons are always pills) */
  --r-card: 16px;        /* cards (mobile) */
  --r-card-lg: 24px;     /* cards (desktop) */
  --r-pill: 999px;       /* header CTA, chips */

  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.08);
  --shadow-lg: 0 16px 40px rgb(0 0 0 / 0.12);
  --shadow-bar: 0 -4px 20px rgb(0 0 0 / 0.08);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --t-fast: 150ms;
}

@media (min-width: 1200px) {
  :root { --header-h: 76px; }
}