/* NHP Review design tokens: the one set of colour, type, spacing, radius, control and motion values shared by the
   portable dossier (dossier.py inlines this file into the page) and the review site (served as /assets/tokens.css).
   Tokens only: no selectors beyond :root and the theme switch. */
:root {
  color-scheme: light dark;

  --bg: light-dark(#f6f4ef, #111316);
  --surface: light-dark(#ffffff, #1a1d22);
  --raised: light-dark(#ffffff, #20242a);
  --sunk: light-dark(#eeebe3, #16191d);
  --line: light-dark(#dcd7cb, #2d3139);
  --line-soft: light-dark(#e8e4da, #24282f);
  --text: light-dark(#1c1b19, #ebe9e4);
  --muted: light-dark(#5b5850, #a8acb4);
  --faint: light-dark(#86827a, #7c818b);
  --accent: light-dark(#3346c0, #97a7ff);
  --accent-strong: light-dark(#2535a0, #b6c1ff);
  --accent-soft: light-dark(#e5e8fa, #222947);
  --on-accent: light-dark(#ffffff, #0d1020);
  --propose: light-dark(#9a5300, #f2b551);
  --propose-soft: light-dark(#f8ead2, #33291a);
  --now: light-dark(#f3e3b8, #3a3220);
  --must: light-dark(#b42318, #ff7d73);
  --should: light-dark(#9a5300, #f2b551);
  --nice: light-dark(#3c7418, #9bd56b);
  --praise: light-dark(#ad2c6b, #ff8dc5);
  --ok: light-dark(#167a3c, #6fd896);
  --fact: light-dark(#0b6e60, #52d2b6);
  --claim: light-dark(#9a5300, #f2b551);
  --interp: light-dark(#6c34c9, #c6a6ff);
  --quote: light-dark(#1d5bbd, #82b4ff);
  --scrim: light-dark(rgb(28 27 25 / .38), rgb(0 0 0 / .55));

  --serif: "Iowan Old Style", Charter, "Bitstream Charter", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale, ratio 1.25; body text never below --step-0 */
  --step--2: .75rem;
  --step--1: .875rem;
  --step-0: 1rem;
  --step-1: 1.2rem;
  --step-2: 1.5rem;
  --step-3: clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  --step-4: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);

  /* spacing on an 8 px rhythm, with 4 px half steps */
  --s1: .25rem;
  --s2: .5rem;
  --s3: .75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4rem;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;

  /* controls: 36 px with a fine pointer, 44 px on touch */
  --control: 2.25rem;
  --control-sm: 1.75rem;
  --bar: 3.75rem;
  --page: 76rem;

  --shadow-1: 0 1px 2px light-dark(rgb(28 27 25 / .06), rgb(0 0 0 / .4)), 0 1px 1px light-dark(rgb(28 27 25 / .04), rgb(0 0 0 / .3));
  --shadow-2: 0 10px 30px -12px light-dark(rgb(28 27 25 / .22), rgb(0 0 0 / .7)), 0 2px 6px light-dark(rgb(28 27 25 / .06), rgb(0 0 0 / .4));
  --shadow-3: 0 24px 60px -16px light-dark(rgb(28 27 25 / .3), rgb(0 0 0 / .75));

  /* one transition style for drawers, selection and confirmations */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur-1: .12s;
  --dur-2: .2s;
  --dur-3: .32s;
}
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
@media (pointer: coarse) {
  :root { --control: 2.75rem; --control-sm: 2.75rem; }
}
@media (prefers-reduced-motion: reduce) {
  :root { --dur-1: 0s; --dur-2: 0s; --dur-3: 0s; }
}