/* Design tokens (BUILD-SPEC-M3.5 step 4). The one place a colour, radius, shadow or font is written: site.css,
   components.css and kaight.css read these, and so does Python (src/site/tokens.py: the share cards, the gallery's
   contrast ratios). Components use the semantic names.

   The direction is A, the research journal (Tom, 2026-10-05), with B's pill buttons: warm paper and near-black ink,
   an ink-blue accent, hairline rules and no shadows; serif for titles, headings and each report's headline sentence,
   the sans for figures and controls. The serif is the system's, so nothing downloads; it is one token
   (--font-heading) if it is to go.

   Breakpoints cannot be custom properties inside a media query; the site's are 420, 600, 700, 760 and 900 px. */

:root {
  /* surfaces */
  --color-bg: #fbfaf6;                 /* warm paper */
  --color-surface: #ffffff;            /* cards, controls, menus */
  --color-surface-muted: #f6f4ee;      /* Kaight's replies */
  --color-surface-head: #f3f1eb;
  --color-surface-stripe: #faf8f3;     /* striped rows */
  --color-surface-hover: #eef2f8;      /* a row under the pointer */
  --color-surface-press: #f1efe9;      /* a secondary button under the pointer */
  --color-surface-user: #eef2f8;       /* the user's messages */
  --color-surface-quote: #f6f4ee;      /* block quotes */
  --color-highlight: #fff3c4;          /* a value that just changed; development notes */

  /* text */
  --color-text: #17191e;
  --color-text-muted: #5c5f66;
  --color-text-soft: #2d3037;          /* leads and secondary prose */
  --color-text-control: #2d3037;       /* outline-secondary buttons */
  --color-text-on-accent: #ffffff;
  --color-text-mark: #7a4b00;          /* "Hypothetical" and assistant marks */

  /* lines */
  --color-border: #e2dfd6;
  --color-border-strong: #c9c5ba;      /* under headers and table heads */
  --color-border-control: #86837b;     /* form controls and outline buttons: 3:1 on white (WCAG 1.4.11) */
  --color-border-hover: #b9c3d6;       /* a linked card under the pointer */
  --color-axis: #8f8b82;

  /* the accent: ink blue */
  --color-accent: #1f3b6e;
  --color-accent-hover: #152a50;
  --color-accent-soft: #f4f6fa;
  --color-accent-tint: #e7ecf5;        /* tags */
  --color-accent-track: #d3dbea;       /* the busy bar's track */
  --color-focus: var(--color-accent);
  --color-logo-mark: #f2c14e;          /* the bar under the logo's AI, on the accent or on dark */

  /* status */
  --color-danger: #b3261e;
  --color-success: #2e7d32;
  --color-info-bg: #eef5f8;    --color-info-border: #cfe3ea;    --color-info-text: #1f4e5f;
  --color-success-bg: #eaf5ec; --color-success-border: #c5e2ca; --color-success-text: #1f5a27;
  --color-warning-bg: #fff8e1; --color-warning-border: #f3e2a6; --color-warning-text: #6b5300;
  --color-danger-bg: #fdecea;  --color-danger-border: #f5c2c0;  --color-danger-text: #8a1c14;
  --color-warning-row: #fff8e6;
  --color-badge-warning-bg: #fff3cd; --color-badge-warning-text: #664d03;
  --color-badge-light-bg: #f1f3f5;   --color-badge-light-text: #343a40;
  --color-inverse-bg: #17191e;  --color-inverse-text: #ffffff;   /* tooltips */

  /* charts: one categorical palette for every chart, Plotly, the static charts and the cards alike (step 6, Tom's
     choice, "Tuned to A"). Series take the slots in order, never cycled; neighbours stay >= 8 apart (OKLab x100) for
     protanopes and deuteranopes and >= 15 for everyone, every slot >= 3:1 on white and on the paper (held by a test). */
  --chart-1: #2f6fb3; --chart-2: #c4502d; --chart-3: #0f8f80; --chart-4: #5a63b8;   /* blue, brick, teal, indigo */
  --chart-5: #5d8a2a; --chart-6: #8e4d9c; --chart-7: #b07f18; --chart-8: #c4517a;   /* olive, plum, ochre, rose */
  /* a series in order, older lighter (the plans of past check-ups): one blue in three steps, newest darkest. Each
     step >= 3:1 on white and on the paper; neighbours >= 15 apart for everyone and for colour-blind readers, and
     every step >= 15 from --chart-2, which the actual takes beside them (held by a test; Tom, 2026-10-06) */
  --chart-seq-1: #7294bb; --chart-seq-2: #385f8b; --chart-seq-3: #002d5e;
  --chart-second: var(--chart-2);      /* a sparkline's second line */
  --chart-grid: #ebe8e0;
  --chart-axis: var(--color-axis);
  --chart-text: var(--color-text-muted);

  /* print */
  --print-bg: #fff;
  --print-text: #000;

  /* radii and shadows: crisp corners, hairlines rather than shadows; pill buttons */
  --radius-xs: 2px;
  --radius-sm: 3px;
  --radius: 4px;
  --radius-lg: 6px;
  --radius-round: 50%;
  --radius-pill: 999px;
  --shadow-1: none;
  --shadow-2: 0 8px 24px rgba(23,25,30,.12);
  --shadow-tooltip: 0 4px 14px rgba(0,0,0,.25);

  /* type */
  --font-sans: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-heading: "Iowan Old Style", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
  --font-answer: var(--font-heading);  /* a report's headline sentence */
  --fw-heading: 600;
  --tracking-heading: -0.005em;
  --fs-body: 17px;
  --lh-body: 1.6;
  --fs-h1: 2.35rem;
  --fs-h2: 1.6rem;
  --fs-h3: 1.25rem;
  --fs-answer: 1.4rem;                 /* the summary's headline sentence */
  --fs-stat: 1.6rem;                   /* a stat tile's figure */
  --label-variant: all-small-caps;     /* short labels: stat and table heads */
  --label-tracking: .06em;
}