/* The Basepath's design tokens; every colour pair is checked in redesign/final/contrast.md. */

@font-face {
  font-family: 'Archivo';
  src: url('fonts/archivo-wdth-wght.woff2') format('woff2');
  font-weight: 400 700;
  font-stretch: 85% 100%;
  font-display: optional;
  unicode-range: U+0020-007E, U+00A0-00FF, U+2009, U+2013-2014, U+2018-201D, U+2022, U+2026, U+2191, U+2193, U+2212;
}
@font-face {
  font-family: 'Newsreader Display';
  src: url('fonts/newsreader-display-500-v1.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: optional;
}
/* Metric-matched fallbacks (research 10, direction B): the swap moves nothing. */
@font-face { font-family: 'Archivo fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 101.8%; ascent-override: 86.3%; descent-override: 20.6%; line-gap-override: 0%; }
@font-face { font-family: 'Archivo fallback android'; src: local('Roboto'); size-adjust: 103.3%; ascent-override: 85%; descent-override: 20.3%; line-gap-override: 0%; }
@font-face { font-family: 'Display fallback'; src: local('Georgia'); size-adjust: 105.7%; ascent-override: 69.6%; descent-override: 25.1%; line-gap-override: 0%; }

:root {
  color-scheme: light;

  /* ---- surface */
  --paper: #ffffff;        /* ground */
  --panel: #f4f5f6;        /* hover tint, tool rows, chips */
  --panel-2: #e8eaed;      /* pressed control */
  --line: #dfe2e6;         /* hairlines: decorative, no contrast duty */
  --rule: #14171a;         /* the 1px ink rule under a table header */
  --control: #7d838b;      /* control borders, tracks: 3:1 on paper and panel */

  /* ---- ink */
  --ink: #14171a;
  --ink-2: #4c535b;
  --ink-3: #5f666f;

  /* ---- signal */
  --accent: #0b6670;       /* links, focus, sorted header, the mark's trace */
  --on-accent: #ffffff;
  --band: #e6f2f2;         /* the sorted column, full height */
  --sel: #d5ecec;          /* the selected row and its bar */
  --bar: #2d8088;          /* chart bars */
  --bar-sel: #14171a;
  --live: #a3401a;
  --tile: #fbfaf6;         /* the favicon's tile only; never a ground */

  /* ---- BPP+ diverging scale, 7 bins centred on 100 (research 09) */
  --cold-3: #9fcefe; --cold-2: #c3e0ff; --cold-1: #e3f0fe;
  --hot-1: #feeae0;  --hot-2: #ffd1bd;  --hot-3: #feb595;

  /* ---- column shading (iteration 2, spec item 4): best -> median -> worst, mixed in OKLab with --paper.
     Green is darker than red in both themes, so the ends differ in lightness under deuteranopia;
     site/test/shade.test.mjs checks --ink on every stop. */
  --shade-good: oklch(0.8 0.11 165);
  --shade-bad: oklch(0.885 0.055 28);
  --tint-hover: rgb(20 23 26 / .07);   /* a row under the pointer, over its shading */
  --tint-sel: rgb(11 102 112 / .16);   /* the selected row */

  /* ---- type */
  --sans: 'Archivo', 'Archivo fallback', 'Archivo fallback android', system-ui, sans-serif;
  --display: 'Newsreader Display', 'Display fallback', Georgia, serif;   /* wordmark, h1, headline figures only */
  /* Floor 11px; chart text 12px or more, percentile numerals 13px or more. */
  --fs-xs: 0.6875rem;      /* 11: headers, status, keys */
  --fs-sm: 0.75rem;        /* 12: meta, captions, charts */
  --fs-cell: 0.8125rem;    /* 13: cells, percentile numerals */
  --fs-ui: 0.875rem;       /* 14: controls, definitions, nav */
  --fs-body: 0.9375rem;    /* 15: prose */
  --fs-lead: 1.25rem;      /* 20: the leader line's name and value */
  --fs-h1: 1.75rem;        /* 28, 22 on phones */
  --fs-figure: 1.75rem;    /* 28: headline figures */
  --fs-readout: 1.375rem;  /* 22: readouts */

  /* ---- space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --gutter: 16px;
  --measure: 1360px;
  --row: 28px;             /* 44px under a finger */
  --head: 32px;            /* table header row */
  --bar-h: 48px;           /* the sticky top bar */
  --rail-h: 0px;           /* the phone stat rail */

  /* ---- shape and elevation: nearly none */
  --radius: 2px;
  --radius-dot: 999px;
  --shadow-pop: 0 6px 18px -8px rgba(20, 23, 26, .35);
  --shadow-edge: 6px 0 6px -6px rgba(20, 23, 26, .28);

  /* ---- motion (research 13 and 15): 150 / 200 / 300 / 400ms, three easings */
  --dur-fast: 150ms;       /* UI feedback, fades */
  --dur-move: 200ms;       /* row FLIP, bar reorder */
  --dur-data: 300ms;       /* bar length, axis rescale */
  --dur-slow: 400ms;       /* the ceiling */
  --ease-enter: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-move: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-exit: cubic-bezier(0.55, 0.085, 0.68, 0.53);
}

@media (pointer: coarse) { :root { --row: 44px; --head: 44px; } }
@media (max-width: 719px) { :root { --fs-h1: 1.375rem; --fs-figure: 1.5rem; } }
@media (min-width: 1100px) { :root { --gutter: 24px; } }

/* Dark: by preference unless the reader chose light, or by choice (data-theme, set before first paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #14161a; --panel: #1d1f23; --panel-2: #26292d; --line: #33373c; --rule: #e4e7ea; --control: #7a7f86;
    --ink: #e4e7ea; --ink-2: #aeb5bc; --ink-3: #9199a1;
    --accent: #5cc3c6; --on-accent: #08191b; --band: #132629; --sel: #173033; --bar: #4fb3b6; --bar-sel: #e4e7ea; --live: #f0946a;
    --cold-3: #105088; --cold-2: #153e64; --cold-1: #172d43; --hot-1: #402315; --hot-2: #5d2c14; --hot-3: #7d3610;
    --shade-good: oklch(0.36 0.075 165); --shade-bad: oklch(0.46 0.09 30); --tint-hover: rgb(255 255 255 / .07); --tint-sel: rgb(92 195 198 / .18);
    --shadow-pop: 0 6px 18px -6px rgba(0, 0, 0, .7); --shadow-edge: 6px 0 6px -6px rgba(0, 0, 0, .8);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #14161a; --panel: #1d1f23; --panel-2: #26292d; --line: #33373c; --rule: #e4e7ea; --control: #7a7f86;
  --ink: #e4e7ea; --ink-2: #aeb5bc; --ink-3: #9199a1;
  --accent: #5cc3c6; --on-accent: #08191b; --band: #132629; --sel: #173033; --bar: #4fb3b6; --bar-sel: #e4e7ea; --live: #f0946a;
  --cold-3: #105088; --cold-2: #153e64; --cold-1: #172d43; --hot-1: #402315; --hot-2: #5d2c14; --hot-3: #7d3610;
  --shade-good: oklch(0.36 0.075 165); --shade-bad: oklch(0.46 0.09 30); --tint-hover: rgb(255 255 255 / .07); --tint-sel: rgb(92 195 198 / .18);
  --shadow-pop: 0 6px 18px -6px rgba(0, 0, 0, .7); --shadow-edge: 6px 0 6px -6px rgba(0, 0, 0, .8);
}

/* Reduced motion: nothing moves; fades stay at 150ms, so the same information arrives. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-move: 0ms; --dur-data: 0ms; --dur-slow: 0ms; }
}