/*
 * cow-tools design tokens: the one place type and colour are defined.
 * The front page, the notebook pages (W5) and their charts all read these.
 *
 * Colour, with intent: an almanac page in the Río de la Plata's light.
 *   paper   bone, the colour of a ledger kept for too long
 *   ink     a warm near-black
 *   león    the river's colour ("el río color de león"): the accent, used sparingly
 *   celeste the sky over it: links, and the first data series
 * Not Garden's fern green, not a catalogue-yellow.
 *
 * Type: Alegreya (text and display) and Alegreya Sans (labels, figures, the chat), both from Huerta
 * Tipográfica in Buenos Aires; IBM Plex Mono for code and identifiers. All SIL OFL 1.1 (assets/fonts/OFL-*.txt).
 *
 * Charts: eight categorical slots in a FIXED order, validated (dataviz six checks, OKLab x100, Machado 2009):
 *   adjacent pairs   light: CVD dE >= 10.2, normal >= 20.8 | dark: CVD >= 10.2, normal >= 18.1
 *   first three, all pairs (scatter, maps, small multiples): light CVD 10.9 / normal 20.1; dark 8.5 / 18.1
 *   slot 6 (sol) is 2.0:1 on light paper: label it directly or give a table view.
 * Never cycle the slots; a ninth series folds into "Other". Choropleths take the celeste ramp (one hue,
 * light to dark); an ordinal ramp starts at step 400 on light paper. Diverging: celeste <-> león, neutral midpoint.
 * The same values, for Vega-Lite / Altair: assets/viz-theme.json.
 */

@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-wght-normal.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("fonts/alegreya-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("fonts/alegreya-sans-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/ibm-plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* type */
  --font-text: "Alegreya", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-label: "Alegreya Sans", "Gill Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --step--2: 0.78rem;
  --step--1: 0.89rem;
  --step-0: 1.0625rem;   /* 17px body */
  --step-1: 1.25rem;
  --step-2: 1.6rem;
  --step-3: clamp(1.9rem, 1.4rem + 2.2vw, 2.6rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.6vw, 3.6rem);
  --leading: 1.5;
  --measure: 64ch;

  /* space */
  --gutter: 16px;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2.25rem;
  --space-7: 3.5rem;
  --radius: 3px;

  /* light: surfaces and ink (text colours all >= 4.5:1 on --paper, --card and --sunk) */
  --paper: #f6f1e7;
  --card: #fbf8f2;
  --sunk: #efe8da;
  --ink: #1e1a14;
  --ink-2: #4f473c;
  --ink-3: #6b6151;
  --rule: #d8cdb9;
  --rule-strong: #b9ab92;
  --accent: #9a5214;      /* león, as text */
  --link: #1f5c92;        /* celeste, as text */
  --tannat: #7e2f64;
  --good: #2f6a1e;
  --bad: #a8302f;
  --focus: #1f5c92;
  --tbd-bg: #ffd9d6;
  --tbd-ink: #8a1010;

  /* chart slots, light (fixed order) */
  --series-1: #2f78b7;   /* celeste */
  --series-2: #c06a1f;   /* león */
  --series-3: #8e3a73;   /* tannat */
  --series-4: #5f8a1f;   /* mate */
  --series-5: #6a5acd;   /* noche */
  --series-6: #d9a400;   /* sol: label directly */
  --series-7: #008c7e;   /* río */
  --series-8: #cf3a3f;   /* ceibo */
  --seq-100: #dceeff; --seq-200: #b6d8fb; --seq-300: #89bdef; --seq-400: #5b9edc;
  --seq-500: #337fc0; --seq-600: #1a619b; --seq-700: #0b4572;
  --seq2-100: #fde6d7; --seq2-200: #f7caab; --seq2-300: #e8a779; --seq2-400: #d38244;
  --seq2-500: #b6610e; --seq2-600: #914600; --seq2-700: #6a2f00;
  --diverge-mid: #e9e2d4;
  --grid: #e3d9c7;
  --axis: #8a7f6c;
}

/* dark: its own steps, validated against the dark paper (not an automatic flip) */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #1a1712;
    --card: #221e18;
    --sunk: #14110d;
    --ink: #efe7d8;
    --ink-2: #cbbfaa;
    --ink-3: #a29680;
    --rule: #3b342a;
    --rule-strong: #5a5042;
    --accent: #e2964f;
    --link: #86b8e8;
    --tannat: #d68abd;
    --good: #93c47d;
    --bad: #ee8a85;
    --focus: #86b8e8;
    --tbd-bg: #5c1414;
    --tbd-ink: #ffd6d2;
    --series-1: #4a92d4; --series-2: #d27a2e; --series-3: #b9609f; --series-4: #7a9e2e;
    --series-5: #8f84e6; --series-6: #b98c00; --series-7: #1a9f97; --series-8: #e05a5c;
    --seq-100: #0b4572; --seq-200: #1a619b; --seq-300: #337fc0; --seq-400: #5b9edc;
    --seq-500: #89bdef; --seq-600: #b6d8fb; --seq-700: #dceeff;
    --diverge-mid: #3a352d;
    --grid: #2e2922;
    --axis: #8f846f;
  }
}
:root[data-theme="dark"] {
  --paper: #1a1712;
  --card: #221e18;
  --sunk: #14110d;
  --ink: #efe7d8;
  --ink-2: #cbbfaa;
  --ink-3: #a29680;
  --rule: #3b342a;
  --rule-strong: #5a5042;
  --accent: #e2964f;
  --link: #86b8e8;
  --tannat: #d68abd;
  --good: #93c47d;
  --bad: #ee8a85;
  --focus: #86b8e8;
  --tbd-bg: #5c1414;
  --tbd-ink: #ffd6d2;
  --series-1: #4a92d4; --series-2: #d27a2e; --series-3: #b9609f; --series-4: #7a9e2e;
  --series-5: #8f84e6; --series-6: #b98c00; --series-7: #1a9f97; --series-8: #e05a5c;
  --seq-100: #0b4572; --seq-200: #1a619b; --seq-300: #337fc0; --seq-400: #5b9edc;
  --seq-500: #89bdef; --seq-600: #b6d8fb; --seq-700: #dceeff;
  --diverge-mid: #3a352d;
  --grid: #2e2922;
  --axis: #8f846f;
}

/* A number that is not real yet. `node site/tools/build.mjs --check` refuses to pass while one is on a page. */
mark.tbd {
  background: repeating-linear-gradient(135deg, var(--tbd-bg) 0 6px, transparent 6px 10px);
  color: var(--tbd-ink);
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 0 0.25em;
  border-radius: 2px;
  outline: 1px dashed var(--tbd-ink);
}