/* Dark theme.
   Follows the visitor's system setting; the header button overrides it.
   Only the colour tokens from style.css are redefined, nothing else changes. */

:root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1d1c19;
    --ink: #e8e5d9;
    --ink-soft: #b3b0a2;
    --rule: #3b3a33;
    --grid-line: rgb(232 229 217 / 0.07);
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.91  0 0 0 0 0.9  0 0 0 0 0.85  0.22 0 0 0 -0.07'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
    --up-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2 L11 10 H1 Z' fill='%23e8e5d9'/%3E%3C/svg%3E");
    --down-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 2 H11 L6 10 Z' fill='%23e8e5d9'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] .site-brand__mark {
    /* same recolouring as style.css, flipped so the mark is light on dark paper */
    filter: grayscale(1) contrast(3) invert(0.83);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --paper: #1d1c19;
        --ink: #e8e5d9;
        --ink-soft: #b3b0a2;
        --rule: #3b3a33;
        --grid-line: rgb(232 229 217 / 0.07);
        --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%' height='100%'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.91  0 0 0 0 0.9  0 0 0 0 0.85  0.22 0 0 0 -0.07'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n)'/%3E%3C/svg%3E");
        --up-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 2 L11 10 H1 Z' fill='%23e8e5d9'/%3E%3C/svg%3E");
        --down-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M1 2 H11 L6 10 Z' fill='%23e8e5d9'/%3E%3C/svg%3E");
    }

    :root:not([data-theme="light"]) .site-brand__mark {
        filter: grayscale(1) contrast(3) invert(0.83);
    }
}

/* ---------- theme toggle button (sits in the header nav) ---------- */
.theme-toggle {
    padding: 0.15rem 0.6rem;
    font: inherit;
    color: inherit;
    background: none;
    border: 1px solid var(--rule);
    border-radius: 4px;
    cursor: pointer;
}

.theme-toggle:hover {
    border-color: var(--ink);
}

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

.theme-toggle[hidden] {
    display: none;
}