:root {
  /* Neutrals are tinted toward the brand hue (250) rather than pure grey, so panels sit
     against the basemap as one family instead of reading as untinted chrome. */
  --bg: oklch(0.992 0.004 250);
  --surface: oklch(0.995 0.003 250);
  --surface-sunken: oklch(0.965 0.006 250);
  --fg: oklch(0.235 0.012 250);
  --fg-muted: oklch(0.480 0.014 250);
  --fg-subtle: oklch(0.539 0.012 250);

  --border: oklch(0.885 0.008 250);
  --border-strong: oklch(0.800 0.010 250);

  /* Every semantic role is solved for >=5:1 against its own surface, which leaves headroom
     over the 4.5:1 AA floor. Recomputed if a surface changes; do not eyeball these. */
  --accent: oklch(0.536 0.13 250);
  --accent-contrast: oklch(0.995 0.003 250);
  --danger: oklch(0.556 0.17 27);
  --warning: oklch(0.541 0.13 75);

  /* Map selection. A warm hue so it never reads as a step in the blue choropleth ramp. */
  --selection: oklch(0.600 0.20 25);

  /* Chart series. Distinct in hue, matched in lightness, so no line dominates. */
  --series-1: oklch(0.536 0.13 250);
  --series-2: oklch(0.543 0.13 150);
  --series-3: oklch(0.560 0.15 45);
  --grid: oklch(0.900 0.006 250);

  --shadow-panel: 0 1px 2px oklch(0.235 0.03 250 / 0.08), 0 4px 12px oklch(0.235 0.03 250 / 0.10);

  --focus-ring: 2px solid var(--accent);

  /* WCAG 2.5.8 sets 24px; 44px is the comfortable target this UI aims for. */
  --tap-min: 44px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 120ms;
  --dur: 180ms;
}

:root[data-theme="dark"] {
  --bg: oklch(0.205 0.010 250);
  --surface: oklch(0.245 0.012 250);
  --surface-sunken: oklch(0.180 0.010 250);
  --fg: oklch(0.945 0.006 250);
  --fg-muted: oklch(0.760 0.010 250);
  --fg-subtle: oklch(0.660 0.012 250);

  --border: oklch(0.330 0.012 250);
  --border-strong: oklch(0.430 0.014 250);

  --accent: oklch(0.624 0.13 250);
  --accent-contrast: oklch(0.180 0.010 250);
  --danger: oklch(0.644 0.17 27);
  --warning: oklch(0.631 0.13 75);

  --selection: oklch(0.660 0.19 25);
  --series-1: oklch(0.680 0.13 250);
  --series-2: oklch(0.700 0.13 150);
  --series-3: oklch(0.720 0.14 60);
  --grid: oklch(0.310 0.010 250);

  --shadow-panel: 0 1px 2px oklch(0 0 0 / 0.40), 0 4px 14px oklch(0 0 0 / 0.45);
}

/* Honour a system preference when the user has not chosen explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.205 0.010 250);
    --surface: oklch(0.245 0.012 250);
    --surface-sunken: oklch(0.180 0.010 250);
    --fg: oklch(0.945 0.006 250);
    --fg-muted: oklch(0.760 0.010 250);
    --fg-subtle: oklch(0.660 0.012 250);
    --border: oklch(0.330 0.012 250);
    --border-strong: oklch(0.430 0.014 250);
    --accent: oklch(0.624 0.13 250);
    --accent-contrast: oklch(0.180 0.010 250);
    --danger: oklch(0.644 0.17 27);
    --warning: oklch(0.631 0.13 75);
    --selection: oklch(0.660 0.19 25);
    --series-1: oklch(0.680 0.13 250);
    --series-2: oklch(0.700 0.13 150);
    --series-3: oklch(0.720 0.14 60);
    --grid: oklch(0.310 0.010 250);
    --shadow-panel: 0 1px 2px oklch(0 0 0 / 0.40), 0 4px 14px oklch(0 0 0 / 0.45);
  }
}

/* Screen-reader-only: gives the page a heading outline without changing the visual design. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}