/* cs-theme.css — the alternate (light) colour scheme.
 *
 * Owner decisions 2026-08-14: (1) "Light — ink accent", chosen from the local theme lab, is the
 * alternate scheme; (2) it follows the visitor's OS setting by default; (3) a header toggle can
 * override that, and the choice is remembered on the device.
 *
 * DARK REMAINS THE DEFAULT AND THE FALLBACK. Every value here lives inside a light-only selector,
 * so a browser with no preference, no support for the query, and no stored choice renders exactly
 * the page that shipped before this file existed.
 *
 * THE THREE-STATE RULE, and why each selector is shaped the way it is:
 *   :root:not([data-theme="dark"])  inside the media query -- OS says light, and the visitor has
 *                                   not explicitly asked for dark. The :not() is what lets the
 *                                   toggle force dark on a light-OS machine.
 *   :root[data-theme="light"]       outside it -- the visitor explicitly asked for light, whatever
 *                                   the OS says. Without this second block the toggle could only
 *                                   ever turn light OFF, never ON.
 * Same values in both, deliberately duplicated rather than @import-ed or postprocessed: this site
 * ships raw static files with no build step (see the design doc's "no bundler" note), so a single
 * readable duplication beats a mechanism.
 *
 * WHY THE ACCENT APPEARS TWICE. `--*-accent` does two jobs: a FILL behind dark text (pill, button,
 * slider, wipe handle) and INK for links and figures (.eyebrow, .cs-count-why, .cs-reduction).
 * One value serves both on a dark page and cannot on a light one -- the first light palette
 * drafted for this site put pale yellow-green ink on cream and made the page's own first line
 * unreadable. Hence --site-accent-ink / --cc-accent-ink, and the contrast floors in
 * tests/theme.spec.mjs that would have caught it without a human looking.
 *
 * NOT THEMED, deliberately: the transparency checkerboard and the labels that sit ON the visitor's
 * image. Those are chrome over someone else's picture, which has no colour scheme.
 */

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) {
        color-scheme: light;

        --site-bg: #eceef1;
        --site-panel: #ffffff;
        --site-text: #171b21;
        --site-muted: #4d5663;
        --site-border: #d3d9e0;
        --site-accent: #1f6feb;
        --site-accent-ink: #0b5bd3;
        --site-accent-hover: #3d86ff;
        --site-on-accent: #ffffff;
        --site-glow: rgba(31, 111, 235, 0.14);

        --cc-accent-ink: #0b5bd3;
        --cc-danger: #b3261e;
    }

    :root:not([data-theme="dark"]) .cc-root {
        --cc-bg: #ffffff;
        --cc-panel: #f5f7f9;
        --cc-panel-hover: #eaeef3;
        --cc-border: #c3cad3;
        --cc-border-solid: #d3d9e0;
        --cc-text: #171b21;
        --cc-muted: #4d5663;
        --cc-accent: #1f6feb;
        --cc-accent-hover: #3d86ff;
        --cc-on-accent: #ffffff;
    }
}

:root[data-theme="light"] {
    color-scheme: light;

    --site-bg: #eceef1;
    --site-panel: #ffffff;
    --site-text: #171b21;
    --site-muted: #4d5663;
    --site-border: #d3d9e0;
    --site-accent: #1f6feb;
    --site-accent-ink: #0b5bd3;
    --site-accent-hover: #3d86ff;
    --site-on-accent: #ffffff;
    --site-glow: rgba(31, 111, 235, 0.14);

    --cc-accent-ink: #0b5bd3;
    --cc-danger: #b3261e;
}

:root[data-theme="light"] .cc-root {
    --cc-bg: #ffffff;
    --cc-panel: #f5f7f9;
    --cc-panel-hover: #eaeef3;
    --cc-border: #c3cad3;
    --cc-border-solid: #d3d9e0;
    --cc-text: #171b21;
    --cc-muted: #4d5663;
    --cc-accent: #1f6feb;
    --cc-accent-hover: #3d86ff;
    --cc-on-accent: #ffffff;
}

/* The toggle itself. Sits in the header beside the status pill, inherits the shell's own tokens so
 * it re-themes with everything else. Two glyphs, one visible at a time -- it shows what you will
 * GET, not what you have, which is the convention every OS-level toggle uses. */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--site-border);
    border-radius: 999px;
    background: transparent;
    color: var(--site-text);
    cursor: pointer;
    line-height: 1;
    font-size: 15px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.theme-toggle:hover {
    border-color: var(--site-accent-ink);
    background: var(--site-panel);
}

.theme-toggle:focus-visible {
    outline: 2px solid var(--site-accent-ink);
    outline-offset: 2px;
}

/* Which glyph shows is driven by what the page is CURRENTLY rendering, so it stays correct whether
 * the scheme came from the OS or from a stored choice. */
.theme-toggle .theme-icon-dark { display: none; }
.theme-toggle .theme-icon-light { display: inline; }

@media (prefers-color-scheme: light) {
    :root:not([data-theme="dark"]) .theme-toggle .theme-icon-light { display: none; }
    :root:not([data-theme="dark"]) .theme-toggle .theme-icon-dark { display: inline; }
}

:root[data-theme="light"] .theme-toggle .theme-icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-dark { display: inline; }