/* MERIT Agency design tokens.
 * Brand palette is locked (approved by David, 2026-10). Hex values are the
 * brand source of truth, so they stay hex rather than being converted.
 * Orange fails contrast on cream for small text: use it for large display
 * text, accents and button fills (with ink text) only.
 */
:root {
  /* Colour: brand */
  --color-ink: #111111;
  --color-cream: #F3F1EC;
  --color-orange: #F0501A;
  --color-muted: #5E5B55;        /* muted text on cream (6.0:1) */
  --color-hairline: #D9D5CC;     /* rules and borders on cream */
  --color-muted-ink: #A8A49C;    /* muted text on ink (7.6:1) */
  --color-hairline-ink: #34322E; /* rules and borders on ink */
  --color-chip: #E4E0D7;

  /* Colour: roles */
  --color-paper: var(--color-cream);
  --color-text: var(--color-ink);
  --color-accent: var(--color-orange);
  --color-focus: var(--color-ink);
  --color-focus-on-ink: var(--color-orange);

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --text-label: 0.75rem;                                   /* 12px mono labels */
  --text-sm: 0.875rem;                                     /* 14px */
  --text-base: 1.0625rem;                                  /* 17px */
  --text-lede: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);   /* 18 → 21px */
  --text-xl: clamp(1.5rem, 1.2rem + 1vw, 2rem);            /* 24 → 32px */
  --text-2xl: clamp(2rem, 1.5rem + 1.6vw, 3rem);           /* 32 → 48px */
  --text-h2: clamp(2.75rem, 1.6rem + 4.2vw, 5.5rem);       /* 44 → 88px */
  --text-display: clamp(3.875rem, 1.2rem + 6.8vw, 7.25rem); /* 62 → 116px */

  --leading-display: 0.92;
  --tracking-display: -0.02em;
  --tracking-label: 0.12em;
  --tracking-wordmark: 0.05em;
  --tracking-agency: 0.6em;

  /* Space (4pt scale) */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;
  --space-5xl: 8rem;
  --space-6xl: 10rem;

  --gutter: clamp(1rem, 4vw, 3.5rem);
  --container: 82rem;

  /* Shape */
  --radius-card: 22px;
  --radius-field: 12px;
  --radius-pill: 999px;
  --rule: 1px solid var(--color-hairline);
  --rule-ink: 1px solid var(--color-hairline-ink);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long: 420ms;
}