/* ---- PLUMBING-WEB: the dark theme ----
   Loaded on every page after style.css (src/render.mjs). The dark palette applies when the system asks for dark and the
   visitor has not chosen light, and whenever the visitor has chosen dark: web/theme.js sets data-theme="light" or "dark"
   on <html> from the button in the header (kept in localStorage), before the page is drawn. With no choice made there is
   no data-theme and the system setting decides. Every colour on the site comes from the custom properties below and in
   style.css, so the cards, tables, badges, chips, the map, the charts (web/chart.mjs reads the same properties and redraws
   when the theme changes) and the inline artwork (the i-* classes) follow them. A dark rule added anywhere else would not
   follow the button: put it here, in both blocks. Text colours meet WCAG AA (4.5:1) on --bg and --panel in both themes. */

/* Text on a fill in an accent colour: the pressed range and filter buttons, step numbers, the current page of a table
   and the lettered badges that stand in for a missing project image. White on the light theme's accents; near-black on the dark theme's lighter accents, where white
   would fall below 3:1. --on-a3 is for the teal (--c3), which needs dark text in both themes. */
:root {
  --on-accent: #ffffff;
  --on-a3: #15171c;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0f14;
    --panel: #151821;
    --text: #e7e9ee;
    --muted: #9aa1af;
    --line: #272b36;
    --grid: rgba(231, 233, 238, 0.08);
    --accent: #918bff;
    --up: #45c98e;
    --down: #ff806e;
    --c1: #918bff;
    --c2: #f59e3b;
    --c3: #2cc4b3;
    --c4: #e879f9;
    --on-accent: #0d0f14;
    --on-a3: #0d0f14;
    --lv-crypto-ban: #fec5b3;
    --lv-exchange-ban: #f99b7e;
    --lv-scheduled-ban: #e37958;
    --lv-delisted-under-pressure: #c45e3d;
    --lv-mixers-targeted: #9b462c;
    --lv-no-restriction-found: #3b5584;
    --lv-none: #272b36;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #0d0f14;
  --panel: #151821;
  --text: #e7e9ee;
  --muted: #9aa1af;
  --line: #272b36;
  --grid: rgba(231, 233, 238, 0.08);
  --accent: #918bff;
  --up: #45c98e;
  --down: #ff806e;
  --c1: #918bff;
  --c2: #f59e3b;
  --c3: #2cc4b3;
  --c4: #e879f9;
  --on-accent: #0d0f14;
  --on-a3: #0d0f14;
  --lv-crypto-ban: #fec5b3;
  --lv-exchange-ban: #f99b7e;
  --lv-scheduled-ban: #e37958;
  --lv-delisted-under-pressure: #c45e3d;
  --lv-mixers-targeted: #9b462c;
  --lv-no-restriction-found: #3b5584;
  --lv-none: #272b36;
  color-scheme: dark;
}

/* a visitor who chose light keeps light form controls and scrollbars on a dark system */
:root[data-theme="light"] { color-scheme: light; }

/* the fills in an accent colour that carry text (style.css draws them with white text) */
.seg button[aria-pressed="true"],
.step-n,
.pager button[aria-current="page"],
.chg-filter input:checked + label,
.tln-filter button[aria-pressed="true"],
.tk-filter button[aria-pressed="true"],
.mono { color: var(--on-accent); }
.mono-a3 { color: var(--on-a3); }
.tln-filter button[aria-pressed="true"] .sw,
.tk-filter button[aria-pressed="true"] .sw { box-shadow: 0 0 0 1.5px var(--on-accent); }