/* Blog design tokens.
   The blog's Editorial theme: warm paper, dark warm ink, one restrained accent.
   Self-contained — no external theme is imported or linked at build or runtime. */

:root,
.theme {
  --font-head: "Spectral", Georgia, "Times New Roman", serif;
  --font-body: "Spectral", Georgia, "Times New Roman", serif;
  --font-label: "Spectral", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --paper: #f7f4ec;
  --surface: #fcfaf4;
  --ink: #211d17;
  --ink-soft: #6a6052;
  /* --ink-faint carries date/word-count metadata on every entry, so it must clear
     WCAG AA (≥4.5:1) against this theme's paper AND surface — not just read as
     "quiet". Every theme/mode below re-tunes it to the same bar (was #9b9282, 2.80:1
     on paper). */
  --ink-faint: #746d61;
  --accent: #0e638e;
  --accent-wash: rgba(14, 99, 142, 0.10);
  --rule: rgba(33, 29, 23, 0.14);
  --hairline: rgba(33, 29, 23, 0.08);
  --mark: rgba(14, 99, 142, 0.13);

  /* Brand — the wordmark's (and favicon's) own accent. Pinned to Byrne blue
     (--chart-1) so the mark is a constant across every light theme rather than
     tracking each theme's --accent; only .mode-dark re-tunes it for legibility on
     near-black (parity with the chart system). This is the site speaking the same
     Byrne language as its studies (widget-studio/README §5). */
  --brand: #0e638e;
  --brand-wash: rgba(14, 99, 142, 0.13);

  /* ── Chart colour system — after Byrne's 1847 Euclid (c82.net/euclid) ──────────
     Designed as a system (see THEMING.md): one universal palette across all four
     editorial themes (charts are decoupled from --accent; they carry their own data
     language); only the three MODES adapt — light here, .mode-sepia inherits, and
     .mode-dark re-tunes. Four families: categorical, diverging, sequential, emphasis.
     Token names: --chart-1…8 stay the categorical family (data manifests reference
     them); the new families are explicitly namespaced.

     CATEGORICAL — Byrne's four canonical colours (blue, red, yellow, warm black)
     lead; the four extensions are DERIVED, not eyeballed (each placed in its own hue
     region — teal/terracotta/violet/olive — by a CVD-aware maximin so the eight stay
     separable adjacent and under colour-blindness). Worst-case perceptual distance
     under protan/deutan/tritan: ΔE 0.062 (was 0.013 — a blue/slate collapse). Hue
     carries the encoding; categorical fills render at FULL opacity (opacity is
     reserved for intensity encoding only — see THEMING.md). */
  --chart-1: #0e638e; /* Byrne blue */
  --chart-2: #d42a20; /* Byrne red */
  --chart-3: #e0a92b; /* Byrne yellow, nudged for legibility on cream */
  --chart-4: #2b2924; /* Byrne warm black */
  --chart-5: #0f9293; /* teal       (H196) */
  --chart-6: #a9705a; /* terracotta (H42)  */
  --chart-7: #8e62bc; /* violet     (H305) */
  --chart-8: #647025; /* olive      (H118) */

  /* DIVERGING — Byrne red ↔ blue through a near-paper neutral (the CVD-safe diverging
     axis: blue↔red, never red↔green). For gain/loss, above/below, signed change. */
  --chart-diverging-low: #0f68a2; /* blue arm */
  --chart-diverging-mid: #ece7df; /* neutral / zero (sits near paper) */
  --chart-diverging-high: #bd4238; /* red arm */

  /* SEQUENTIAL — a single-hue Byrne-blue luminance ramp (light → dark) for true
     sequential fills. NOTE the editorial default for intensity stays opacity over a
     single categorical token (paper shows through); this ramp is for when a real
     light→dark scale is needed. The runtime interpolates between these two stops. */
  --chart-sequential-from: #e0edf8; /* pale blue */
  --chart-sequential-to: #004d74; /* deep blue */

  /* EMPHASIS — highlight one series, recede the rest. --chart-emphasis is the
     attention colour (Byrne red); --chart-muted is the de-emphasis grey. */
  --chart-emphasis: #d42a20;
  --chart-muted: #8d8881;

  --body-size: 19px;
  --body-leading: 1.72;
  --label-spacing: 0.18em;

  --content-measure: 700px;
  --wide-measure: 1040px;
  --page-pad: 56px;
  --reader-scale: 1;

  --radius-small: 6px;
  --radius-panel: 8px;
  --motion-local: 150ms;
  --motion-surface: 220ms;
}

.theme-editorial {
  color-scheme: light;
}

.theme-press {
  --font-head: Georgia, "Times New Roman", serif;
  --font-body: Georgia, "Times New Roman", serif;
  --font-label: Georgia, "Times New Roman", serif;
  --paper: #fcfbf6;
  --surface: #ffffff;
  --ink: #18130d;
  --ink-soft: #4f463a;
  --ink-faint: #7b7164; /* AA on press paper/surface (was #918676, 3.45:1) */
  --accent: #b02a1d;
  --accent-wash: rgba(176, 42, 29, 0.09);
  --rule: rgba(24, 19, 13, 0.18);
  --hairline: rgba(24, 19, 13, 0.10);
  --mark: rgba(176, 42, 29, 0.12);
  --body-size: 18px;
  --body-leading: 1.66;
  --label-spacing: 0.16em;
}

.theme-scandi {
  --font-head: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --paper: #f3f3f1;
  --surface: #ffffff;
  --ink: #1a1b1d;
  --ink-soft: #6c6f73;
  --ink-faint: #6c6e71; /* AA on scandi paper/surface (was #a6a9ad, 2.12:1) */
  --accent: #2563b8;
  --accent-wash: rgba(37, 99, 184, 0.08);
  --rule: rgba(26, 27, 29, 0.12);
  --hairline: rgba(26, 27, 29, 0.07);
  --mark: rgba(37, 99, 184, 0.10);
  --body-size: 18px;
  --body-leading: 1.74;
  --label-spacing: 0.14em;
}

.theme-clean {
  --font-head: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-label: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --paper: #ffffff;
  --surface: #ffffff;
  --ink: #171717;
  --ink-soft: #484848;
  --ink-faint: #767676; /* already AA on white (4.54:1) — the token's baseline bar */
  --accent: #0645ad;
  --accent-wash: rgba(6, 69, 173, 0.08);
  --rule: rgba(23, 23, 23, 0.16);
  --hairline: rgba(23, 23, 23, 0.08);
  --mark: rgba(6, 69, 173, 0.10);
  --body-size: 18px;
  --body-leading: 1.58;
  --label-spacing: 0.10em;
  --content-measure: 760px;
}

.mode-sepia {
  --paper: #efe4cf;
  --surface: #f6ecd9;
  --ink: #3b3122;
  --ink-soft: #6d5e44;
  --ink-faint: #70644e; /* AA on sepia paper/surface (was #9c8b6c, 2.64:1) */
  --rule: rgba(59, 49, 34, 0.16);
  --hairline: rgba(59, 49, 34, 0.09);
  /* Charts: sepia INHERITS the light chart system by design, not by omission. Sepia
     paper (#efe4cf) is only marginally darker than the cream, and the categorical
     extensions were derived under a ≥3:1-on-sepia constraint, so they clear contrast
     here too. Yellow (--chart-3) is the one weak-on-sepia colour and is a fill-only
     colour by policy (large area + direct value label, never a thin line — see
     THEMING.md). A separate warm-shifted sepia set was considered and declined: the
     gain is marginal and it would be a fourth palette to keep CVD-verified. */
}

.mode-dark {
  color-scheme: dark;
  --paper: #15151a;
  --surface: #1d1e24;
  --ink: #e9e7e2;
  --ink-soft: #a9a7a1;
  --ink-faint: #878784; /* AA on dark paper/surface (was #6f6e6b, 3.26:1 on surface) */
  --rule: rgba(255, 255, 255, 0.15);
  --hairline: rgba(255, 255, 255, 0.08);
  --accent-wash: rgba(110, 140, 200, 0.18);
  --mark: rgba(110, 140, 200, 0.18);
  /* Byrne blue lifted into the dark-readable band (matches --chart-1 dark). */
  --brand: #5e9ac0;
  --brand-wash: rgba(94, 154, 192, 0.18);

  /* Chart system re-tuned for near-black (see THEMING.md). Hue identity and the
     light-mode lightness ORDERING are preserved (that ordering carries the CVD
     spacing); lightness is lifted into the dark-readable band and chroma capped so
     bright colours don't glow. Every colour clears ≥4.3:1 on --surface; warm-black
     inverts to a light warm grey; red softens to a coral (a pure bright red vibrates
     on black). Worst-case CVD distance: ΔE 0.052 (parity with light's 0.062). */
  --chart-1: #5e9ac0; /* blue */
  --chart-2: #fa6a59; /* red → coral */
  --chart-3: #f7bd40; /* yellow */
  --chart-4: #c7c4bc; /* warm black → light warm grey */
  --chart-5: #53babb; /* teal */
  --chart-6: #c5907c; /* terracotta */
  --chart-7: #b48be2; /* violet */
  --chart-8: #8d9a50; /* olive */

  --chart-diverging-low: #4b99d7;
  --chart-diverging-mid: #514c46; /* neutral / zero (sits near dark surface) */
  --chart-diverging-high: #ee6f61;
  --chart-sequential-from: #152b3b;
  --chart-sequential-to: #86cdff;
  --chart-emphasis: #fa6a59;
  --chart-muted: #75716a;
}

/* Editorial's accent is Byrne blue; on near-black it needs the same lift the brand
   and chart-1 get (#0e638e reads at only ~2.7:1 on dark). This keeps links/focus in
   step with the dark-mode wordmark (--brand #5e9ac0) and clears AA. Scoped to
   editorial so the other themes keep their own dark accent. */
.theme-editorial.mode-dark {
  --accent: #5e9ac0;
  --accent-wash: rgba(94, 154, 192, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
  }
}