/* Hallmark · tokens · genre: editorial · theme: Newsprint
 * axes — paper band: light (96.5%) · display style: roman-serif · accent hue: warm (28°)
 * Every colour and every font in styles.css references a token from this file.
 */

:root {
  /* ── Type families ───────────────────────────────────────────────
     2+1: display (Newsreader) + body (IBM Plex Sans) + outlier (IBM Plex Mono).
     The outlier carries TWO slots and no more:
       1 · the key in a key/value record (hero facts, spec rows, contact list)
       2 · the footer colophon
     Nowhere else. */
  --font-display: "Newsreader", ui-serif, Charter, Georgia, serif;
  --font-body:    "IBM Plex Sans", ui-sans-serif, "Segoe UI", sans-serif;
  --font-outlier: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;

  /* ── Colour · newsprint cream, printers’ ink, one spot red ─────── */
  --color-paper:     oklch(96.5% 0.008 85);
  --color-paper-2:   oklch(93.5% 0.011 85);
  --color-paper-3:   oklch(90%   0.013 82);
  --color-rule:      oklch(79%   0.011 80);   /* decorative hairlines only */
  --color-rule-input:oklch(56%   0.010 78);   /* component boundaries — 3:1 against paper */
  --color-rule-2:    oklch(88%   0.009 82);
  --color-neutral:   oklch(58%   0.009 78);
  --color-muted:     oklch(42%   0.010 75);
  --color-ink:       oklch(20%   0.012 70);
  --color-ink-soft:  oklch(31%   0.011 72);
  --color-accent:    oklch(45%   0.170 28);
  --color-accent-ink:oklch(96.5% 0.008 85);   /* text on an accent fill — 4.5:1+ */
  --color-accent-2:  oklch(93%   0.035 30);
  --color-focus:     oklch(45%   0.170 28);
  --color-shadow:    oklch(20% 0.012 70 / 0.10);
  --color-ok:        oklch(45%   0.110 150);
  --color-ok-tint:   oklch(94%   0.030 150);
  --color-error:     oklch(44%   0.180 25);
  --color-error-tint:oklch(94%   0.032 25);
  --color-frost:     oklch(96.5% 0.008 85 / 0.86);

  /* ── Type scale · major third (1.25) off a 16 px body ─────────── */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.5rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-display-s: clamp(1.875rem, 3.4vw + 0.75rem, 3.25rem);
  --text-display:   clamp(2.5rem, 5vw + 0.75rem, 4.75rem);

  /* ── Spacing · 4 pt base, named by role ───────────────────────── */
  --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: clamp(1.25rem, 5vw, 4.5rem);
  --page-max: 78rem;
  --measure: 62ch;

  /* ── Rules · hairline language ────────────────────────────────── */
  --rule-hair:   1px;
  --rule-double: 3px;

  /* ── Radius · newsprint is paper; corners stay honest ─────────── */
  --radius-none: 0;
  --radius-sm:   2px;

  /* ── 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-index · six named levels ───────────────────────────────── */
  --z-base:     1;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;   /* in-page sticky (the Feature Stack rail) */
  --z-sticky-nav: 300; /* the top nav always out-paints in-page sticky */
  --z-modal:    400;
  --z-toast:    500;

  /* ── Chrome heights (sticky offsets read these) ───────────────── */
  --bar-h: 64px;
}