/* Hallmark · genre: editorial · macrostructure: Bento Grid · theme: Linen
 * tone: ambitious · anchor hue: 80° warm oat + accent 28° terracotta · nav: N1 · footer: Ft2
 * pre-emit critique: P4 H5 E4 S4 R4 V5
 */
:root {
  /* Colour — Linen (warm oat anchor, hue 80°) */
  --color-paper:       oklch(96%  0.013 80);
  --color-paper-2:     oklch(91%  0.016 75);
  --color-paper-3:     oklch(87%  0.018 72);
  --color-rule:        oklch(80%  0.012 75);
  --color-neutral:     oklch(55%  0.010 70);
  --color-muted:       oklch(44%  0.008 68);
  --color-ink-2:       oklch(28%  0.012 60);
  --color-ink:         oklch(16%  0.012 55);
  --color-accent:      oklch(58%  0.18  28);
  --color-accent-dark: oklch(50%  0.18  28);
  --color-accent-ink:  oklch(99%  0.004 80);
  --color-on-dark:     oklch(93%  0.008 75);
  --color-focus:       oklch(52%  0.19  28);

  /* Typography */
  --font-display:  "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body:     "Newsreader", "Georgia", serif;
  --font-outlier:  "Geist Mono", ui-monospace, monospace;

  /* Type scale — major third ×1.25 */
  --text-xs:        0.64rem;
  --text-sm:        0.8rem;
  --text-base:      1rem;
  --text-md:        1.25rem;
  --text-lg:        1.5625rem;
  --text-xl:        1.9531rem;
  --text-2xl:       2.4414rem;
  --text-3xl:       3.0518rem;
  --text-4xl:       3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2rem, 3.5vw + 0.75rem, 3.8rem);

  /* Spacing — 4pt base */
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs:  0.5rem;
  --space-sm:  0.75rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-4xl: 9rem;

  /* Page gutter */
  --page-gutter: max(2.5rem, calc(50% - 37.5rem));

  /* Motion */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --dur-instant: 80ms;
  --dur-short:   220ms;
  --dur-mid:     380ms;
  --dur-long:    560ms;

  /* Radii */
  --radius-sm:   3px;
  --radius-md:   6px;
  --radius-tile: 8px;

  /* Z-index — six named levels */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-modal:    400;
  --z-toast:    500;
  --z-tooltip:  600;
}