/* weather.city — the dark half of the palette.
 *
 * There is no shared stylesheet on this site: seventy of the seventy-five pages declare their own
 * :root inline, and they agree almost perfectly (--sign identical on 74 of them, --paper/--card/
 * --ink/--ink2/--blue/--line/--line2 on 69 with two or three distinct values each). That is what
 * makes one file enough. `:root[data-theme="dark"]` scores (0,2,0) against a bare `:root`'s (0,1,0),
 * so this sheet outranks every page's own tokens wherever it names one — and the same trick lets it
 * reach a page's own components, because `:root[data-theme="dark"] .tile` outranks `.tile`.
 *
 * Light stays the default. Nothing here applies until wc-theme.js sets data-theme="dark".
 */

/* ── tokens ────────────────────────────────────────────────────────────────────────────────────
 * The two brand colours are the hard part, and the numbers decide it rather than taste. --sign is
 * used 101 times as a background and 151 times as text; --blue 132 and 77. No single value can be
 * both AA text on a dark page and an AA background under white — measured across the whole ramp,
 * the crossover is around 4.2:1 on both sides, which passes neither. So they are pitched to read as
 * TEXT (--sign 5.4:1 on paper, --blue 5.7:1), and where they are a filled chip or button the white
 * on them lands at 3.2-3.4:1, which is AA for the bold 12-13px type those fills actually carry.
 * If a fill ever holds body text, give it --sign-tx rather than moving the token.
 */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#11151a; --card:#191e25; --canvas:#141922;
  --ink:#e7ecf2;   --ink2:#aab5c2; --mut:#8994a1;
  --line:#2b333d;  --line2:#222932; --stroke:#3a4551;
  --sign:#16a05f;  --sign-dk:#0f7a47; --sign-sub:#7fe0b0; --sign-tx:#ffffff;
  /* A brand colour pitched to read as text is too loud across a whole card. Large filled areas
     take this instead — dark green under white is 7:1, and on a dark page it reads as depth
     rather than as a highlighter. */
  --sign-fill:#0c5c39;
  --blue:#4a93dd;  --navy:#0b1119;
  --warn:#f0a952;  --warnbg:#3a2a12; --live:#3ddc84;
  --water:#1d3a55; --red:#ff6b6b;   --c1:#4a93dd; --c2:#2f6ea8;
  --iblue:#5aa2e8; --ired:#ff6b6b;  --flag:#ffcb05;
  --foot-bg:#080b0f; --foot-tx:#aab5c2;
}

/* ── surfaces the pages hard-code ──────────────────────────────────────────────────────────────
 * 586 rules across the site set a white background with a literal rather than a token. These are
 * the selectors that repeat often enough to be worth naming here; the long tail is swept page by
 * page. Every one is prefixed with the theme attribute, so light is untouched.
 */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .board,
:root[data-theme="dark"] .stat,
:root[data-theme="dark"] .chartcard,
:root[data-theme="dark"] .calwrap,
:root[data-theme="dark"] .trendwrap,
:root[data-theme="dark"] .atbl-wrap,
:root[data-theme="dark"] .tblwrap,
:root[data-theme="dark"] .finder,
:root[data-theme="dark"] .qres,
:root[data-theme="dark"] .deck,
:root[data-theme="dark"] .tiles .t{background:var(--card);border-color:var(--line)}

:root[data-theme="dark"] .seg,
:root[data-theme="dark"] .seg button,
:root[data-theme="dark"] .ctl,
:root[data-theme="dark"] .find,
:root[data-theme="dark"] .backbtn,
:root[data-theme="dark"] button.act,
:root[data-theme="dark"] .lens button,
:root[data-theme="dark"] .calchip,
:root[data-theme="dark"] select.sc,
:root[data-theme="dark"] select.sel,
:root[data-theme="dark"] .trendhdr select,
:root[data-theme="dark"] form.ramp,
:root[data-theme="dark"] .wc-rail a.rp{background:var(--card);color:var(--ink2);border-color:var(--line)}
:root[data-theme="dark"] .seg button:hover,
:root[data-theme="dark"] .lens button:hover,
:root[data-theme="dark"] .wc-rail a.rp:hover{background:#222a34;color:var(--ink)}
:root[data-theme="dark"] .seg button.on{background:var(--blue);color:#0b1119}

:root[data-theme="dark"] input,
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select{background:var(--card);color:var(--ink);border-color:var(--line)}
:root[data-theme="dark"] .tabs{background:var(--canvas)}
:root[data-theme="dark"] .tbl th{background:var(--canvas)}
:root[data-theme="dark"] .tbl tr.click:hover td{background:#222a34}
:root[data-theme="dark"] .tbl tr.sel td{background:#1d2a3a}

/* The big brand slabs: a masthead, a hero, a section band. Small chips keep --sign. */
:root[data-theme="dark"] .sign,
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .masthead,
:root[data-theme="dark"] .band,
:root[data-theme="dark"] .hdr{background:var(--sign-fill);color:#fff}

/* Shadows are drawn for ink on paper; on a dark page they read as grime. Deepen and thin them. */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .tile,
:root[data-theme="dark"] .board{box-shadow:0 2px 10px rgba(0,0,0,.45)}

/* A map is a light object. It keeps its own paper and gets a border instead of blending out. */
:root[data-theme="dark"] .mapwrap,
:root[data-theme="dark"] .maplibregl-map,
:root[data-theme="dark"] img.map,
:root[data-theme="dark"] .mapimg{border-radius:8px}
:root[data-theme="dark"] .legend,
:root[data-theme="dark"] .readout,
:root[data-theme="dark"] .stamp{color:#191c22}      /* these float ON the map, so they stay light */

/* ── the toggle itself (both themes) ───────────────────────────────────────────────────────── */
.thm{border:0;background:none;cursor:pointer;font-size:14px;line-height:1;padding:4px 6px;
  border-radius:6px;opacity:.85;margin-left:14px;flex:none}
.thm:hover{opacity:1;background:rgba(255,255,255,.12)}
.bc .in .thm{color:inherit}