/* Hallmark tokens · axes: light+deep-chapter = paper-band · display=roman-serif · accent-hue=warm(38°)
   Hansym brand — warm paper, deep teal-green ink, terracotta accent —
   converted from frontend/src/index.css hex values to OKLCH.

   Theme rotation is deliberately suspended for the 2026-08-10 redesign: this palette is the
   product's own, shared with frontend/src/index.css, and the brief is "redesign, keep the
   brand". What changed instead is the number of SURFACES — the page now opens into a lit
   sheet and closes into a deep band, both drawn from the same two hues. See .hallmark/log.json.

   Every ratio below is measured, not estimated: site/tools/check-contrast.py recomputes the
   whole table from these token values and exits non-zero if any pair regresses. */

@font-face {
  font-family: "Newsreader";
  src: url("../fonts/Newsreader-var-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* ---- color · the paper chapter ---- */
  --color-paper: oklch(95.8% 0.007 97.4);        /* #f2f1ec — page base */
  --color-sheet: oklch(100% 0 0);                /* #ffffff — bounded panels & figure mats ONLY */
  --color-ink: oklch(26.1% 0.026 203.9);         /* #14282a — all body text · 13.59:1 on paper */
  --color-muted: oklch(50.5% 0.024 203.9);       /* #55696b — secondary text · 5.13:1 */
  --color-accent: oklch(57.3% 0.154 37.8);       /* #c1502c — LARGE text / graphics / fills only: 4.17:1 on paper */
  --color-accent-text: oklch(51% 0.14 38.7);     /* #a6421f — body-size terracotta text · 5.43:1 */
  --color-focus: oklch(63.4% 0.159 37.7);        /* #d8613c — focus ring on paper · 3.26:1 ≥ 3:1 */
  --color-tint: oklch(94.6% 0.018 48.5);         /* #f8eae3 — pale terracotta wash, sparing */
  --color-hairline: oklch(91.7% 0.005 67.8);     /* #e6e3e0 — every rule on paper */
  --color-success: oklch(50.5% 0.084 138.2);     /* #4c7040 */
  --color-warning: oklch(50.8% 0.108 73.3);      /* #8a5a00 */
  --color-danger: oklch(48.2% 0.161 28.8);       /* #a62b22 */
  --color-on-accent: oklch(100% 0 0);            /* white on terracotta fill · 4.72:1 */
  --glow: oklch(57.3% 0.154 37.8 / 0.22);        /* the app's bloom glow */

  /* ---- color · the sheet chapter (Security + Specifications) ----
     The ink hue held at near-white. Deliberately NOT --color-sheet (#ffffff): that token
     keeps its bounded-panel-only role, so a panel can still lift off this band. */
  --surface-sheet: oklch(97.6% 0.004 200);       /* #f7f9f9 */
  --hairline-sheet: oklch(90.5% 0.006 200);      /* #e0e5e5 — cool rule for this band */

  /* ---- color · the deep chapter (Workflow + Demo/colophon) ----
     Promoted from the v2 dark-palette comment block: these are the app's real dark-theme
     values from frontend/src/index.css, so the band is on-brand by construction. */
  --surface-deep: oklch(20.6% 0.020 201.6);      /* #0c1a1b — the band */
  --hairline-deep: oklch(32.9% 0.026 201.8);     /* #23393a — rules on deep */
  --on-deep: oklch(93.5% 0.006 186.7);           /* #e8ecea — body text on deep */
  --on-deep-muted: oklch(73.2% 0.021 194.7);     /* #9daeac — secondary on deep */
  /* lifted 3.3% in L off the app's #e0714a so that --color-ink on this fill clears 5.5:1
     as a button label (4.85 → 5.51). Hue and chroma untouched, so it is still the app's
     dark-theme accent; the change also improves its own text duty on the deep band.
     White on this fill measures only 3.17:1, so the dark label is the correct one. */
  --accent-on-deep: oklch(70.4% 0.149 39.7);     /* #ec7b54 — accent lifted for dark */
  --glow-deep: oklch(70.4% 0.149 39.7 / 0.28);
  /* no --focus-on-deep: --color-focus measures 4.83:1 on --surface-deep, well past the
     3:1 ring threshold, so the plan's separate dark focus token turned out unnecessary. */

  /* ---- the column ghost · a score-table grid, at the threshold of visibility ---- */
  --ghost-step: 4.5rem;
  --ghost-line-deep: oklch(93.5% 0.006 186.7 / 0.055);
  --ghost-line-paper: oklch(26.1% 0.026 203.9 / 0.038);

  /* ---- elevation · by lightness on paper, by depth on deep. Never a coloured halo. ---- */
  --shadow-plate:
    0 1px 2px oklch(26.1% 0.026 203.9 / 0.06),
    0 10px 28px -10px oklch(26.1% 0.026 203.9 / 0.16);
  --shadow-plate-deep:
    0 1px 2px oklch(0% 0 0 / 0.24),
    0 18px 40px -14px oklch(0% 0 0 / 0.55);

  /* ---- type ---- */
  --font-display: "Newsreader", Georgia, "Times New Roman", serif; /* roman only — no italic headings */
  --font-body: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "Cascadia Mono", Consolas, ui-monospace, monospace;  /* verbatim machine truth only */

  --text-xs: 0.6875rem;    /* 11px — panel-label style only */
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.25rem;
  --text-lg: 1.5625rem;
  --text-xl: 1.9531rem;
  --text-2xl: 2.4414rem;
  --text-3xl: 3.0518rem;
  /* the price, and the price alone. Fluid because a fixed 61px outranked the h1 on every
     viewport under ~1110px — which made an unset placeholder the largest type on the page */
  --text-4xl: clamp(2.4414rem, 2.6vw + 1.2rem, 3.8147rem);   /* 39 → 61px */

  /* fluid steps · the hero, the chapter heads, and the stage numerals are the only
     three places on the page that scale with the viewport */
  --text-display: clamp(2.75rem, 4.2vw + 0.9rem, 5.5rem);   /* 44 → 88px */
  --text-section: clamp(2rem, 3.2vw + 0.9rem, 3.4rem);      /* 32 → 54px */
  --text-numeral: clamp(3.25rem, 6.4vw, 8rem);              /* 52 → 128px */

  --leading-display: 1.08;
  --leading-body: 1.55;
  --leading-flat: 1;       /* numerals only */
  --track-display: -0.015em;
  --track-caps: 0.08em;
  --track-mono: 0.01em;

  /* ---- measure · body width varies by register, not by accident ---- */
  --measure: 65ch;         /* running prose */
  --measure-tight: 52ch;   /* stage copy, FAQ answers, the vault's prose columns */

  /* ---- space (4pt) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 3rem;
  --space-2xl: 4.5rem;
  --space-3xl: 6rem;
  --page-gutter: clamp(1rem, 5vw, 4rem);
  --wrap-max: 72rem;
  --nav-h: 3.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;
  --dur-bloom: 800ms;

  /* ---- rules & radii ---- */
  --rule-hair: 1px;
  --rule-stage: 2px;
  --tick-h: 9px;           /* the cell rule's vertical tick */
  --radius-sm: 4px;
  --radius-md: 8px;
}