/* Design tokens. EVERY color the site and its charts use is defined here -- charts
   read these at render time (js/theme.js) and redraw on theme change, so retheming
   means editing this file only. Palette values come from a CVD-validated set; if
   you change a --series-* or --heat-* value, re-run the palette validator.

   Dark mode: the media query covers the OS setting, [data-theme] covers the toggle.
   The :not([data-theme="light"]) guard lets a light choice beat an OS-dark setting. */

:root {
  color-scheme: light;

  /* Surfaces & ink (light: f3southcary.com's cool greys and blue) */
  --page: #f2f5f9;
  --surface: #ffffff;
  --surface-2: #e9eef5;
  --border: rgba(10, 26, 51, 0.10);
  --text: #17191e;
  --text-2: #5a6170;
  --muted: #80879a;
  --grid: #dde3ec;
  --axis: #c3ccd8;
  --accent: #005eb8;
  --accent-ink: #ffffff;
  --focus: #005eb8;

  /* Site chrome: header, tabs bar and footer copied from f3southcary.com. Navy in
     both themes, as on the website. */
  --chrome: #0a1a33;
  --chrome-2: #13284a;
  --chrome-text: #cad6e8;
  --chrome-strong: #ffffff;
  --chrome-muted: #a9b6ca;
  --chrome-faint: #7f8591;
  --chrome-line: rgba(255, 255, 255, 0.08);
  --chrome-hover: rgba(255, 255, 255, 0.06);
  --chrome-accent: #005eb8;
  --chrome-accent-dark: #004a91;

  /* Categorical: fixed slot order (never cycled). Slot 9 = "Other". */
  --series-1: #2a78d6;
  --series-2: #eb6834;
  --series-3: #1baf7a;
  --series-4: #eda100;
  --series-5: #e87ba4;
  --series-6: #008300;
  --series-7: #4a3aa7;
  --series-8: #e34948;
  --series-other: #b4b2a9;

  /* Sequential (one hue): calendar heatmap, 0 / 1 / 2 / 3+ posts per day */
  --heat-0: #e6ebf2;
  --heat-1: #86b6ef;
  --heat-2: #2a78d6;
  --heat-3: #184f95;

  /* Region heatmap (posts per PAX per month): 0 is the neutral "no posts" cell;
     1-4 are the stops of a near-white -> navy ramp (darker = more, same in both
     themes). Each cell's count prints in whichever on-heatmap ink contrasts more. */
  --heatmap-0: #e6ebf2;
  --heatmap-1: #dce8f9;
  --heatmap-2: #86b6ef;
  --heatmap-3: #2a78d6;
  --heatmap-4: #184f95;
  --on-heatmap-0: #52514e;
  --on-heatmap-dark: #0b0b0b;
  --on-heatmap-light: #ffffff;

  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 1px 2px rgba(11, 11, 11, 0.04), 0 4px 16px rgba(11, 11, 11, 0.04);
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-head: "Oswald", "Arial Narrow", Arial, sans-serif;

  /* Plot reads this for tooltip backgrounds. */
  --plot-background: var(--surface);
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --page: #0d0d0d;
    --surface: #1a1a19;
    --surface-2: #242423;
    --border: rgba(255, 255, 255, 0.09);
    --text: #ffffff;
    --text-2: #c3c2b7;
    --muted: #898781;
    --grid: #2c2c2a;
    --axis: #383835;
    --accent: #3987e5;
    --accent-ink: #ffffff;
    --focus: #6da7ec;
    --series-1: #3987e5;
    --series-2: #d95926;
    --series-3: #199e70;
    --series-4: #c98500;
    --series-5: #d55181;
    --series-6: #008300;
    --series-7: #9085e9;
    --series-8: #e66767;
    --series-other: #5d5c57;
    --heat-0: #262625;
    --heat-1: #184f95;
    --heat-2: #2a78d6;
    --heat-3: #86b6ef;
    --heatmap-0: #262625;
    --heatmap-1: #dce8f9;
    --heatmap-2: #86b6ef;
    --heatmap-3: #2a78d6;
    --heatmap-4: #184f95;
    --on-heatmap-0: #c3c2b7;
    --on-heatmap-dark: #0b0b0b;
    --on-heatmap-light: #ffffff;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0d0d0d;
  --surface: #1a1a19;
  --surface-2: #242423;
  --border: rgba(255, 255, 255, 0.09);
  --text: #ffffff;
  --text-2: #c3c2b7;
  --muted: #898781;
  --grid: #2c2c2a;
  --axis: #383835;
  --accent: #3987e5;
  --accent-ink: #ffffff;
  --focus: #6da7ec;
  --series-1: #3987e5;
  --series-2: #d95926;
  --series-3: #199e70;
  --series-4: #c98500;
  --series-5: #d55181;
  --series-6: #008300;
  --series-7: #9085e9;
  --series-8: #e66767;
  --series-other: #5d5c57;
  --heat-0: #262625;
  --heat-1: #184f95;
  --heat-2: #2a78d6;
  --heat-3: #86b6ef;
  --heatmap-0: #262625;
  --heatmap-1: #dce8f9;
  --heatmap-2: #86b6ef;
  --heatmap-3: #2a78d6;
  --heatmap-4: #184f95;
  --on-heatmap-0: #c3c2b7;
  --on-heatmap-dark: #0b0b0b;
  --on-heatmap-light: #ffffff;
  --shadow: none;
}