/* ════════════════════════════════════════════════════════════════════
   THEME TOGGLE — shared by the main page, About, and Privacy.
   Linked by index-v2.html, about.html, privacy.html; pairs with
   theme-toggle.js (behavior). One icon-only <button id="themeToggle">
   sits in each .nav-pill.

   Dark base shows a SUN (click → switch to light); the
   html[data-theme="light"] block swaps to a MOON (click → switch to
   dark). The glyph is a CSS mask on a ::before, filled by currentColor,
   so it inherits the nav's text color + hover for free and the button's
   own focus ring / hover wash are NOT clipped by the mask. Mask images
   are image requests, covered by the existing CSP img-src 'self' data:.

   Token safety: the toggle also ships on /privacy, whose dark page defines
   only --parchment*, --copper, --radius-md, --ease-out — so anything
   outside that set (--rgb-parchment, --copper-glow, --dur-micro) carries a
   literal fallback. (privacy-light.css does define --parchment* and
   --rgb-ink-dark, so the light rules below resolve there.)
   ════════════════════════════════════════════════════════════════════ */

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 0;
    border-radius: 100px;
    background: transparent;
    color: var(--parchment-muted);
    cursor: pointer;
    transition: color var(--dur-micro, 0.15s) var(--ease-out, ease),
                background var(--dur-micro, 0.15s) var(--ease-out, ease);
}

.theme-toggle::before {
    content: "";
    display: block;
    width: 1.15rem;
    height: 1.15rem;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Cline x1=%2212%22 y1=%221%22 x2=%2212%22 y2=%223%22/%3E%3Cline x1=%2212%22 y1=%2221%22 x2=%2212%22 y2=%2223%22/%3E%3Cline x1=%224.22%22 y1=%224.22%22 x2=%225.64%22 y2=%225.64%22/%3E%3Cline x1=%2218.36%22 y1=%2218.36%22 x2=%2219.78%22 y2=%2219.78%22/%3E%3Cline x1=%221%22 y1=%2212%22 x2=%223%22 y2=%2212%22/%3E%3Cline x1=%2221%22 y1=%2212%22 x2=%2223%22 y2=%2212%22/%3E%3Cline x1=%224.22%22 y1=%2219.78%22 x2=%225.64%22 y2=%2218.36%22/%3E%3Cline x1=%2218.36%22 y1=%225.64%22 x2=%2219.78%22 y2=%224.22%22/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%225%22/%3E%3Cline x1=%2212%22 y1=%221%22 x2=%2212%22 y2=%223%22/%3E%3Cline x1=%2212%22 y1=%2221%22 x2=%2212%22 y2=%2223%22/%3E%3Cline x1=%224.22%22 y1=%224.22%22 x2=%225.64%22 y2=%225.64%22/%3E%3Cline x1=%2218.36%22 y1=%2218.36%22 x2=%2219.78%22 y2=%2219.78%22/%3E%3Cline x1=%221%22 y1=%2212%22 x2=%223%22 y2=%2212%22/%3E%3Cline x1=%2221%22 y1=%2212%22 x2=%2223%22 y2=%2212%22/%3E%3Cline x1=%224.22%22 y1=%2219.78%22 x2=%225.64%22 y2=%2218.36%22/%3E%3Cline x1=%2218.36%22 y1=%225.64%22 x2=%2219.78%22 y2=%224.22%22/%3E%3C/svg%3E") center / contain no-repeat;
}

.theme-toggle:hover {
    color: var(--parchment);
    background: rgba(var(--rgb-parchment, 244, 241, 232), 0.08);
}

.theme-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--copper-glow, rgba(79, 108, 196, 0.3));
}

/* ── Light theme ─────────────────────────────────────────────────────
   Swap the sun for a moon (higher-specificity html[data-theme="light"]
   wins over the dark base regardless of stylesheet load order) and flip
   the hover wash from parchment to dark ink. */
html[data-theme="light"] .theme-toggle::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22%23000%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z%22/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2224%22 height=%2224%22 viewBox=%220 0 24 24%22 fill=%22%23000%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z%22/%3E%3C/svg%3E");
}

html[data-theme="light"] .theme-toggle:hover {
    background: rgba(var(--rgb-ink-dark, 28, 27, 24), 0.06);
}