/* ==========================================================================
   Design tokens - cool slate / laboratory blue

   Direction: a deep blue-grey field with a single steel-blue signal accent.
   Neutrals carry a slight blue cast (chroma ~0.012–0.022 around hue 255) so
   greys read as cool and considered rather than muddy - a pure 0-chroma grey
   next to a blue accent looks dirty by comparison.

   Because the field is almost entirely desaturated, the only saturated things
   on the page are the ones carrying meaning: the evidence tiers and the
   category rails. That is deliberate - colour is information here, not
   decoration, and a calm field is what makes long-form scrolling comfortable.
   ========================================================================== */

:root {
  /* --- Field (cool slate) ------------------------------------------------ */
  --ink-900: oklch(16% 0.017 255);
  --ink-850: oklch(19% 0.019 255);
  --ink-800: oklch(23% 0.021 255);
  --ink-700: oklch(29% 0.022 255);
  --ink-600: oklch(38% 0.021 255);

  /* --- Paper (cool light neutrals) --------------------------------------- */
  --bone-100: oklch(96% 0.005 250);
  --bone-200: oklch(89% 0.008 250);
  --bone-400: oklch(75% 0.011 250);
  --bone-600: oklch(60% 0.013 250);

  /* --- Signal (steel blue - actions and emphasis, used sparingly) --------- */
  --signal: oklch(73% 0.117 242);
  --signal-bright: oklch(82% 0.098 238);
  --signal-deep: oklch(52% 0.108 247);
  --signal-wash: oklch(73% 0.117 242 / 0.14);
  --signal-line: oklch(73% 0.117 242 / 0.34);

  /* Foreground for anything sitting on a filled signal surface. Cool and
     dark so it belongs to the blue family rather than fighting it. */
  --on-signal: oklch(17% 0.030 250);

  /* --- Data (charts, metrics - never decorative) -------------------------- */
  --data: oklch(80% 0.082 205);
  --data-wash: oklch(80% 0.082 205 / 0.14);

  /* --- Evidence strength scale -------------------------------------------
     Kept chromatic against the desaturated field. These four are the most
     important information on the page, so they are allowed to be the most
     saturated thing on it. Muted slightly from pure hues to sit calmly. */
  --ev-strong: oklch(76% 0.115 165);
  --ev-moderate: oklch(80% 0.115 95);
  --ev-limited: oklch(74% 0.125 55);
  --ev-preclinical: oklch(70% 0.085 300);

  /* --- Semantic ---------------------------------------------------------- */
  --bg: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-card: oklch(21% 0.020 255 / 0.66);
  --text: var(--bone-100);
  --text-muted: var(--bone-400);
  --text-dim: var(--bone-600);
  --hairline: oklch(100% 0 0 / 0.10);
  --hairline-strong: oklch(100% 0 0 / 0.19);

  /* --- Type ---------------------------------------------------------------
     Newsreader is a low-contrast screen serif - it holds its weight at very
     large display sizes without the hairline strokes that make high-contrast
     serifs shimmer on a dark background.

     Body and UI are IBM Plex Sans, with IBM Plex Mono for figures. Using one
     superfamily for both keeps letterforms consistent between prose and data,
     and drops the total from four families to three. */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --font-eyebrow: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-body: "IBM Plex Sans", "Helvetica Neue", sans-serif;
  --font-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  /* Nudged up slightly from the previous scale - Plex Sans has a smaller
     x-height than Manrope, so it needs the extra size to read as easily. */
  --text-base: clamp(1rem, 0.95rem + 0.24vw, 1.09rem);
  --text-lead: clamp(1.1rem, 1.01rem + 0.44vw, 1.34rem);
  --text-h3: clamp(1.35rem, 1.16rem + 0.85vw, 1.85rem);
  --text-h2: clamp(2.1rem, 1.42rem + 3.05vw, 4.15rem);
  --text-h1: clamp(3rem, 1.35rem + 7.4vw, 8.25rem);
  --text-metric: clamp(2.25rem, 1.6rem + 2.9vw, 4rem);

  --leading-tight: 0.98;
  --leading-snug: 1.18;
  /* Long-form reading measure. 1.7 rather than 1.62: looser leading is the
     single cheapest thing that makes a long dark-mode page comfortable. */
  --leading-body: 1.7;

  --tracking-eyebrow: 0.2em;
  --tracking-tight: -0.018em;

  /* --- Rhythm ------------------------------------------------------------ */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  /* Applied as padding-block, so the gap a reader actually sees between two
     sections is DOUBLE this value plus the segue margin. The previous 11rem
     cap produced roughly 350px of dead space on a wide screen. Capped low
     enough that the top of the next chapter is on screen while the previous
     one is still being read. */
  --space-chapter: clamp(2.75rem, 1.9rem + 3.2vw, 5rem);

  --gutter: clamp(1.25rem, 0.6rem + 3.1vw, 4rem);
  --measure: 66ch;
  --max-w: 1320px;
  --max-w-narrow: 880px;

  /* --- Surface treatment ------------------------------------------------- */
  --radius-sm: 4px;
  --radius: 10px;
  --radius-lg: 18px;
  --shadow-lift: 0 1px 2px oklch(0% 0 0 / 0.34), 0 12px 32px -12px oklch(10% 0.03 255 / 0.66);
  --shadow-deep: 0 2px 4px oklch(0% 0 0 / 0.42), 0 40px 80px -28px oklch(10% 0.03 255 / 0.8);

  /* --- Motion ------------------------------------------------------------ */
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 720ms;
  --dur-cinematic: 1150ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Light mode is deliberately not offered. This is a single-direction
   aesthetic - a light variant would dilute it. */

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur: 1ms;
    --dur-slow: 1ms;
    --dur-cinematic: 1ms;
  }
}