/* Design tokens. Single light theme.
   Every colour, radius and shadow in the app should come from here — if you
   find yourself typing a hex value in another stylesheet, add a token instead. */
:root {
  --bg: #f4f6fa;
  --bg2: #eef1f7;
  --surface: #ffffff;
  --surface2: #f8f9fc;
  --border: #e3e8f0;
  --border2: #d0d7e3;
  --text: #0d1117;
  --text2: #52606e;
  --text3: #8f9bab;
  --accent: #4f46e5;
  --accent-dim: #eef2ff;
  --accent-hover: #4338ca;
  --green: #059669;
  --green-dim: #ecfdf5;
  --red: #dc2626;
  --red-dim: #fef2f2;
  --amber: #d97706;
  --amber-dim: #fffbeb;

  --r: 14px;
  --r-lg: 20px;
  --r-xl: 24px;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 6px rgba(0, 0, 0, .04);
  --sh: 0 1px 3px rgba(0, 0, 0, .05), 0 4px 14px rgba(0, 0, 0, .07);
  --sh-md: 0 6px 20px rgba(0, 0, 0, .09), 0 2px 6px rgba(0, 0, 0, .05);
  --sh-lg: 0 12px 36px rgba(0, 0, 0, .13), 0 4px 10px rgba(0, 0, 0, .06);
  --sh-xl: 0 24px 64px rgba(0, 0, 0, .18), 0 8px 20px rgba(0, 0, 0, .08);

  /* Header height — layout.css and the drawer/overlay offsets depend on this */
  --hh: 64px;

  /* The dark surface used by the sign-in screen, loading overlay and header */
  --dark-grad: linear-gradient(135deg, #0d1117 0%, #161b24 60%, #1a2035 100%);
}

/* ── Text size ───────────────────────────────────────────────────────────────
   Per-user, set in js/prefs.js, stored on the member doc. Every component in
   the app sizes itself in rem, so scaling the root font-size scales the whole
   UI — no component CSS needs to know this exists. Values are absolute (not
   relative to the browser default) so the three options stay predictable
   regardless of what a volunteer's own browser zoom is already set to. */
html[data-text-size="large"] { font-size: 18px; }
html[data-text-size="xlarge"] { font-size: 20px; }

/* ── Colour themes ───────────────────────────────────────────────────────────
   Per-user, same mechanism as text size. Both override only the tokens above
   — every component already reads colour exclusively through them, so a
   theme is just a second value for each custom property, not a second
   stylesheet. --dark-grad (sign-in screen, loading overlay, header) is
   deliberately left alone in every theme: it's app chrome, always dark, and
   carries no status meaning that colour-blindness or contrast affects. */

/* Stronger borders and near-black-on-white text/surfaces, for low vision
   generally rather than colour vision specifically. */
html[data-theme="high-contrast"] {
  --bg: #ffffff;
  --bg2: #eeeeee;
  --surface: #ffffff;
  --surface2: #f2f2f2;
  --border: #1a1a1a;
  --border2: #000000;
  --text: #000000;
  --text2: #1a1a1a;
  --text3: #333333;
  --accent: #1a3fd6;
  --accent-dim: #dbe4ff;
  --accent-hover: #12299e;
  --green: #006b32;
  --green-dim: #d7f5e3;
  --red: #b00000;
  --red-dim: #ffdede;
  --amber: #8a4b00;
  --amber-dim: #ffe9c7;
}

/* Red/green is the single most common colour-vision confusion (deuteranopia
   / protanopia), and this app leans on red = problem / green = OK throughout
   (sync dot, review flags, RECORD_RULES failures). Remapping the three
   status colours to the Okabe-Ito palette — blue / orange / reddish-purple —
   keeps "good vs. needs attention vs. wrong" visually distinct under every
   common form of colour blindness, including tritanopia. --accent is left
   alone: it's brand/selection colour, not a status signal. */
html[data-theme="colorblind"] {
  --green: #0072b2;
  --green-dim: #e1f0fa;
  --amber: #e69f00;
  --amber-dim: #fff3dc;
  --red: #cc79a7;
  --red-dim: #f9e6f0;
}