/* Design tokens: DESIGN.md section 2 is the source. Change a value there first, then here.
   The seven chapter ring colours are mirrored in zoom.js (REGIONS); a test keeps the two in step. */
:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #fbf8f4;      /* measured: median of the KF00 watercolour border. Site ground. */
  --mist: #ebf2f3;       /* measured: artwork pale blue-grey. Alternate section surface. */
  --sand: #ece9d6;       /* measured: artwork khaki. NBIF band. */
  --sky: #cce6f2;        /* measured: artwork sky. Decorative only. */
  /* Section washes (trial, 2026-10-05, the user's request: a different colour for each section, easing along the spectrum from warm to cool; second pass the same
     day: "paler"). Order down the page: intro --paper (hue 75), Research --wash-research (88), NBIF --wash-nbif (100), Education --wash-edu (150), Contact --wash-contact (229).
     All are very pale (lightness 0.95 or more, chroma 0.016 or less) and at least as light as --mist, so every text colour keeps at least 4.5:1 on them (DESIGN.md section 3).
     --sand stays the artwork's measured khaki; the NBIF band is a paler tint of it. */
  --wash-research: #fcf7ec;
  --wash-nbif: #f1efe3;
  --wash-edu: #eef5ef;
  --wash-contact: #ecf4f8;
  /* The same colours as oklch() literals, for the fades only. Chrome treats the hue of a hex colour with little chroma as undefined, so a
     colour-mix between hex tokens loses its hue (and came out pink); a literal keeps it. The fades start and end on the hex tokens above, exactly. */
  --ok-paper: oklch(0.9803 0.0062 75.41); --ok-research: oklch(0.9770 0.0155 86.42); --ok-nbif: oklch(0.9504 0.0160 99.00); --ok-edu: oklch(0.9632 0.0108 149.86); --ok-contact: oklch(0.9623 0.0101 228.89);
  --ok-mist: oklch(0.9562 0.0076 207.14);
  --line: #d9d4c9;       /* hairline dividers (not text) */

  /* Text */
  --ink: #283a47;
  --ink-muted: #56666f;
  --accent: #00688f;     /* links, buttons, kickers */
  --accent-strong: #075f85;

  /* Decorative colour (never used for text) */
  --water: #6dd0f7;
  --earth: #e5b796;

  /* Chapter ring colours (also in zoom.js) */
  --ring-kf01: #2d5f91; --ring-kf02: #b04a3a; --ring-kf03: #7253a2; --ring-kf04: #238b8d;
  --ring-kf05: #99642d; --ring-kf06: #a34a76; --ring-kf07: #2f7654;
  --ring-kf08: #5e7300;   /* Sustainability (added 2026-10-04): an olive, dE 39 or more from the other seven, 5.0:1 on the paper and 4.7:1 on the mist */
  /* The same colours for small text (chapter names in the rail): each is at least 4.6:1 on --paper and on --mist.
     The ring colour is used as it is where it already passes; the Water treatment teal (3.85:1) and the Water transition
     brown (4.7:1 on paper, 4.4 on mist) are darkened towards --ink. */
  --ring-kf01-text: var(--ring-kf01); --ring-kf02-text: var(--ring-kf02); --ring-kf03-text: var(--ring-kf03);
  --ring-kf04-text: #24767b; --ring-kf05-text: #92612f; --ring-kf06-text: var(--ring-kf06); --ring-kf07-text: var(--ring-kf07); --ring-kf08-text: var(--ring-kf08);

  /* Type */
  --font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --step-label: clamp(0.75rem, 0.7268rem + 0.09524vw, 0.8125rem);
  --step-small: clamp(0.875rem, 0.8518rem + 0.09524vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1.016rem + 0.1905vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.157rem + 0.381vw, 1.5rem);
  --step-h3: clamp(1.375rem, 1.236rem + 0.5714vw, 1.75rem);
  --step-h2: clamp(1.875rem, 1.55rem + 1.333vw, 2.75rem);
  --step-h1: clamp(2.125rem, 1.707rem + 1.714vw, 3.25rem);
  --step-display: clamp(2.5rem, 1.85rem + 2.667vw, 4.25rem);

  /* Space (4px base) */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px;
  --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px;
  --section-pad: clamp(56px, 7vw, 96px);

  /* Layout */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(20px, 5vw, 64px);
  --col-gap: clamp(16px, 2.2vw, 32px);
  --header-h: 64px;

  /* Shape */
  --ring-w: 3px;         /* the one circle stroke */
  --radius-1: 2px; --radius-2: 8px; --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --dur-fast: 150ms; --dur-base: 280ms; --dur-reveal: 520ms;
  --reveal-shift: 12px;
}