/* Shared dark theme for the hand-written pages.
 *
 * Extracted from index_draft.html so there is one copy: about, privacy,
 * terms, license and visitor_map all link this rather than each carrying
 * their own palette. The Sphinx-generated pages (references, releaseNotes,
 * installation, tutorials, modules) have no :root block to override and are
 * the ones moving to Astro, which is themed already.
 */
/* Dark theme. The palette above was designed against a near-white
   background; on a dark one --text-secondary #5c5c5c falls to 2.69:1
   and is unreadable. These are re-derived and measured, not inverted. */
/* `html[data-theme="dark"]`, not `[data-theme="dark"]`.
 *
 * Every hand-built page carries its own `:root { --bg-primary: #FAF9F7; ... }`
 * in an inline <style> that comes *after* this linked stylesheet. A bare
 * `[data-theme="dark"]` has the same specificity as `:root` (0,1,0), so the
 * later inline light palette won and dark mode only half-applied: the
 * descendant rules below (`[data-theme="dark"] .navbar`, 0,2,0) did take
 * effect, giving a dark navbar over a cream page. index.html looked right only
 * because it also declares the dark block inline, after its own `:root`.
 * Adding the element makes this 0,1,1 — it outranks `:root` wherever it is
 * declared, so the palette is the same on every page. */
html[data-theme="dark"] {
    --bg-primary: #14171c;
    --bg-secondary: #1a1e25;
    --bg-card: #1e2229;
    --bg-code: #11141a;
    --text-primary: #eef1f5;      /* 15.9:1 */
    --text-secondary: #b8c1cd;    /*  9.9:1  (was 2.7:1) */
    --text-muted: #96a1b0;        /*  6.9:1 */
    --text-code: #cbd5e1;
    --accent-primary: #6BA6E8;    /*  7.1:1  (was 3.3:1) */
    --accent-secondary: #A38BF0;
    --accent-tertiary: #4FC08D;
    --accent-blue: #7FB6EA;
    --accent-warning: #E8BE6A;
    --accent-viz: #F08098;
    --border-color: rgba(255, 255, 255, 0.10);
    --border-color-strong: rgba(255, 255, 255, 0.16);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.55);
    --shadow-xl: 0 25px 50px rgba(0,0,0,0.65);
}
html { color-scheme: light; }
html[data-theme="dark"] { color-scheme: dark; }
.theme-toggle {
    background: none; border: 1px solid var(--border-color);
    color: var(--text-secondary); border-radius: 8px;
    width: 36px; height: 36px; cursor: pointer; font-size: 0.95rem;
    display: inline-flex; align-items: center; justify-content: center;
    transition: color .2s ease, border-color .2s ease;
}
.theme-toggle:hover { color: var(--text-primary); border-color: var(--border-color-strong); }
/* The navbar hard-codes rgba(250,249,247,.85) rather than using a
   token, so it stays cream in dark mode unless overridden here. Same
   for the two other literal light surfaces. */
[data-theme="dark"] .navbar {
    background: rgba(20, 23, 28, 0.85);
    border-bottom-color: var(--border-color);
}
[data-theme="dark"] .nav-link { color: var(--text-secondary); }
[data-theme="dark"] .nav-link:hover { color: var(--text-primary); }
[data-theme="dark"] .nav-logo-text { color: var(--text-primary); }
[data-theme="dark"] .hero { background: var(--bg-primary); }
[data-theme="dark"] .modal-content { background: var(--bg-card); }
[data-theme="dark"] .filter-btn {
    background: var(--bg-card); color: var(--text-secondary);
    border-color: var(--border-color);
}
[data-theme="dark"] .filter-btn:hover { color: var(--text-primary); }
[data-theme="dark"] .filter-btn.active {
    background: var(--accent-primary); color: var(--bg-primary);
    border-color: var(--accent-primary);
}
/* Three-state toggle: the icon shows the *preference*, not the resolved
   theme -- otherwise "auto" and "dark at night" look identical and the button
   gives no feedback about what clicking it did.
   The two-state rules this replaces keyed off `[data-theme]` (the resolved
   theme) while these key off `[data-theme-pref]`, so both matched at once and
   dark mode drew the sun *and* the moon. There is one rule set now. */
.theme-toggle i { display: none; }
[data-theme-pref="auto"]  .theme-toggle .fa-circle-half-stroke { display: inline; }
[data-theme-pref="light"] .theme-toggle .fa-sun { display: inline; }
[data-theme-pref="dark"]  .theme-toggle .fa-moon { display: inline; }

/* visitor_map.html draws its world map as inline SVG, and the land, the
   graticule and the city-label halo are literal light colours in that page's
   own <style>. Tokens cannot reach them, so they stayed near-white over the
   dark background -- the map was the one part of the page that did not follow
   the theme. Prefixing with `html` puts these at (0,2,1), which outranks the
   page's own `.country` (0,1,0) wherever it is declared. */
html[data-theme="dark"] .country {
    fill: #2a3038;
    stroke: #3b434e;
}
html[data-theme="dark"] .country:hover { fill: #363e49; }
html[data-theme="dark"] .graticule { stroke: #272d35; }
html[data-theme="dark"] .city-label {
    fill: #b8c1cd;
    stroke: #14171c;      /* halo matches --bg-primary, not white */
}