/* Design tokens. Dark is the home theme; light is a full second theme, not an inversion. */

:root {
  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace;

  --r-xs: 6px;
  --r-sm: 9px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  --gap: 12px;
  --sidebar-w: 316px;
  --panel-w: 412px;

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.3, 1.4, .5, 1);
  --t-fast: 120ms;
  --t-med: 240ms;
  --t-slow: 420ms;
}

:root,
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #04060b;
  --stage-a: #0d1728;
  --stage-b: #070b15;
  --stage-c: #04060b;
  --grid-dot: rgba(160, 190, 255, .07);

  --ink: #f3f6fb;
  --ink-2: #a9b3c6;
  --ink-3: #6e7a91;
  --ink-4: #3f4859;
  --on-ink: #070a11;

  --glass: rgba(10, 14, 23, .94);
  --glass-solid: rgba(13, 18, 29, .95);
  --panel-head: #0b0f19;
  --glass-border: rgba(255, 255, 255, .09);
  --glass-hi: rgba(255, 255, 255, .07);
  --shadow: 0 30px 70px -18px rgba(0, 0, 0, .75), 0 3px 10px rgba(0, 0, 0, .35);
  --shadow-sm: 0 10px 30px -10px rgba(0, 0, 0, .7);

  --fill-1: rgba(255, 255, 255, .045);
  --fill-2: rgba(255, 255, 255, .08);
  --fill-3: rgba(255, 255, 255, .13);
  --line: rgba(255, 255, 255, .08);
  --line-2: rgba(255, 255, 255, .16);
  --focus: #9cc3ff;

  /* chart furniture */
  --chart-grid: rgba(255, 255, 255, .07);
  --chart-axis: rgba(255, 255, 255, .18);
  --chart-muted: #7a869c;
  --chart-neutral: #55607a;

  /* categorical slots for compared counties (validated set, dark steps) */
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;

  /* map */
  --map-halo: rgba(110, 160, 255, .22);
  --map-rim: rgba(255, 255, 255, .28);
  --map-state: rgba(4, 6, 11, .62);
  --map-county: rgba(4, 6, 11, .30);
  --map-nodata: #1a2030;
  --map-dim: #182031;
  --map-graticule: rgba(150, 180, 255, .06);
  --map-label: #ffffff;
  --map-label-halo: rgba(4, 6, 11, .78);
  --map-select: #ffffff;
}

:root[data-theme="light"] {
  color-scheme: light;

  --bg: #e4e9f0;
  --stage-a: #f6f8fb;
  --stage-b: #e9eef4;
  --stage-c: #dbe2eb;
  --grid-dot: rgba(30, 50, 90, .08);

  --ink: #0b1220;
  --ink-2: #434d60;
  --ink-3: #717c90;
  --ink-4: #a7b0c0;
  --on-ink: #ffffff;

  --glass: rgba(255, 255, 255, .92);
  --glass-solid: rgba(255, 255, 255, .96);
  --panel-head: #f7f9fb;
  --glass-border: rgba(15, 30, 60, .10);
  --glass-hi: rgba(255, 255, 255, .9);
  --shadow: 0 30px 70px -22px rgba(20, 35, 70, .35), 0 3px 10px rgba(20, 35, 70, .08);
  --shadow-sm: 0 10px 30px -12px rgba(20, 35, 70, .3);

  --fill-1: rgba(15, 30, 60, .04);
  --fill-2: rgba(15, 30, 60, .07);
  --fill-3: rgba(15, 30, 60, .12);
  --line: rgba(15, 30, 60, .09);
  --line-2: rgba(15, 30, 60, .2);
  --focus: #1f6fe0;

  --chart-grid: rgba(15, 30, 60, .08);
  --chart-axis: rgba(15, 30, 60, .22);
  --chart-muted: #6c778b;
  --chart-neutral: #9aa4b6;

  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;

  --map-halo: rgba(30, 60, 120, .22);
  --map-rim: rgba(15, 30, 60, .45);
  --map-state: rgba(15, 25, 45, .5);
  --map-county: rgba(15, 25, 45, .18);
  --map-nodata: #cfd6e0;
  --map-dim: #d6dce5;
  --map-graticule: rgba(30, 50, 90, .07);
  --map-label: #0b1220;
  --map-label-halo: rgba(255, 255, 255, .82);
  --map-select: #0b1220;
}