/* Hallmark · macrostructure: Long Document · section heads: S4 inline-no-break · nav: N9 edge-aligned · footer: Ft2 inline-rule
 * theme: custom · vibe: "restrained warmth, luxurious cream, paper grain"
 * paper: oklch(95.3% 0.019 83) · accent: oklch(49% 0.125 52) · texture: grain + mottle
 * display: Newsreader · body: Newsreader · label: IBM Plex Sans
 * axes: light / roman-serif / warm · genre: editorial · enrichment: none
 * studied: no · context: user-provided (austere · skip analytics)
 * pre-emit critique: P5 H4 E5 S5 R5 V5
 * slop test: 69/69 pass · contrast: pass (46-50) · nav: N9 · footer: Ft2 · slop: pass (51-55)
 * honest: pass (56) · chrome: pass (57) · tokens: pass (58) · responsive: pass (59) · icons: pass (60)
 * mobile: pass (36, 59, 61-69)
 *
 * Design tokens — the single source of truth. styles.css references
 * these by name only; no raw colour or font value lives outside this file.
 */

:root {
  /* ---- Colour · warm cream · OKLCH ------------------------------ */
  /* Paper sits at L 95.3% — reads as printed stock, not lit screen,
     yet stays clear of the lightness where warmth turns "stained".
     Chroma in the yellow band (hue 81–83) reads as ivory. */
  --color-paper:         oklch(95.3% 0.019 83);   /* warm ivory — base surface */
  --color-paper-2:       oklch(93%   0.022 83);   /* one elevation step */
  --color-paper-3:       oklch(89.5% 0.025 81);   /* quiet contrast band*/
  --color-rule:          oklch(82%   0.020 81);   /* hairline divider   */
  --color-rule-2:        oklch(87.5% 0.017 83);   /* faint divider      */
  --color-muted:         oklch(47%   0.018 64);   /* de-emphasised text · 4.5:1+ on paper */
  --color-neutral:       oklch(43%   0.019 60);   /* labels, section heads */
  --color-ink-2:         oklch(37%   0.021 56);   /* secondary prose    */
  --color-ink:           oklch(22%   0.022 52);   /* warm near-black    */
  --color-accent:        oklch(49%   0.125 52);   /* muted clay · links */
  --color-accent-strong: oklch(43%   0.130 49);   /* link hover         */
  --color-accent-ink:    oklch(95.3% 0.019 83);   /* text on accent fill*/
  --color-focus:         oklch(50%   0.155 51);   /* focus ring         */

  /* ---- Paper texture · two desaturated layers ------------------- */
  /* Real stock has two scales of irregularity: a fine fibre tooth
     and a slow, large tonal unevenness across the sheet. One even
     noise layer reads as a digital filter; both together read as
     paper. Monochrome (feColorMatrix saturate 0) — never coloured
     RGB noise. Opacity is baked into each rect; both stay under
     the 0.1 ceiling anti-patterns.md endorses for grain. */
  --texture-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.09'/%3E%3C/svg%3E");
  --texture-mottle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1000' height='1000'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='1000' height='1000' filter='url(%23m)' opacity='0.05'/%3E%3C/svg%3E");

  /* ---- Type ----------------------------------------------------- */
  --font-display: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-body:    "Newsreader", ui-serif, Georgia, "Times New Roman", serif;
  --font-label:   "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;

  --text-xs:    0.78rem;
  --text-sm:    0.875rem;
  --text-base:  1.0625rem;   /* ~17px body */
  --text-md:    1.25rem;
  --text-lg:    1.5rem;
  --text-xl:    1.85rem;
  --text-2xl:   2.25rem;
  --text-display-s: clamp(2.1rem, 1.15rem + 3.4vw, 3rem);

  --lh-tight:   1.14;
  --lh-snug:    1.3;
  --lh-normal:  1.45;
  --lh-relaxed: 1.66;

  --tracking-display: -0.018em;
  --tracking-tight:   -0.006em;
  --tracking-label:   0.14em;

  /* ---- Space · 4pt scale ---------------------------------------- */
  --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 ----------------------------------------------------- */
  --page-max:    66rem;
  --page-gutter: clamp(1.5rem, 6vw, 7rem);
  --measure:     62ch;

  /* ---- Lines ---------------------------------------------------- */
  --rule-hair: 1px;

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

  /* ---- Z scale -------------------------------------------------- */
  --z-base:   1;
  --z-sticky: 200;
}