/* Hallmark · route: custom (bespoke) · structure: painted diorama on a rail, words rise while the camera glides
 * idea: "the world paints itself in as you arrive"
 * paper: oklch(98.1% 0.008 78) (sampled from the master painting, rgb 251 248 243) · accent: oklch(45% 0.11 292) dusk violet
 * display + body: Newsreader (300/400/500, optical size) · UI: Geist (400/500)
 * axes: light / roman-serif / cool (violet) · studied: yes (davidwhyte.com/experience, structure only) · gates: see BRIEF.md
 */
:root {
  /* colour: warm watercolour paper, warm ink, one dusk accent */
  --color-paper:     oklch(98.1% 0.008 78);
  --color-paper-2:   oklch(95.6% 0.012 76);
  --color-rule:      oklch(84% 0.014 70);
  --color-muted:     oklch(46% 0.018 62);
  --color-ink:       oklch(25% 0.022 58);
  --color-ink-soft:  oklch(34% 0.02 58);
  --color-accent:    oklch(45% 0.11 292);
  --color-accent-2:  oklch(38% 0.11 292);
  --color-focus:     oklch(45% 0.11 292);
  --color-halo:      oklch(98.1% 0.008 78 / 0.85);
  --color-sun-dawn:  oklch(78% 0.09 25);
  --color-sun-noon:  oklch(84% 0.11 85);
  --color-sun-dusk:  oklch(60% 0.12 300);

  /* type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --font-ui: "Geist", "Segoe UI", system-ui, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;
  --text-beat: clamp(1.5rem, 1.05rem + 1.55vw, 2.5rem);
  --text-hero: clamp(2.6rem, 1.4rem + 5vw, 5.75rem);
  --text-close: clamp(2rem, 1.2rem + 3vw, 3.75rem);

  /* space (4 pt) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --gutter: clamp(1.25rem, 0.6rem + 4.2vw, 6.5rem);

  /* 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;

  --mask-on: black;          /* alpha masks only (not a colour on the page) */
  --mask-off: transparent;

  --rule-hair: 1px;
  --radius-pill: 999px;
}