/* Shared Mist/Midnight palette and control, including hosted apps. */
:root,
:root[data-theme="mist"] {
    color-scheme: light;
    --paper: #EDF2F7;
    --ink: #243447;
    --muted: #526477;
    --faint: #CCD7E2;
    --accent: #285C86;
    --accent-soft: rgba(40, 92, 134, 0.14);
    --code-bg: #DFE8F1;
    --syn-keyword: #a2401c;
    --syn-string: #4a7536;
    --syn-number: #8c5e00;
    --syn-comment: #526477;
    --syn-name: #2e5d86;
    --syn-function: #6b3f8c;
    --syn-operator: #526477;

    /* Callout tints: earthy versions of info, tip, warning, danger... */
    --c-info: #3c6c8f;
    --c-tip: #4d7a45;
    --c-warning: #a26f12;
    --c-danger: #a8402f;
    --c-important: #7a4b86;
    --c-note: #526477;
    --serif: "Newsreader", "Iowan Old Style", Charter, Georgia, serif;
    --sans: "Inter", system-ui, -apple-system, sans-serif;

    /* Hand-drawn strokes, used as masks so they take the accent colour. */
    --swash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'%3E%3Cpath d='M3 9 C 25 3, 48 3, 70 7 S 105 11, 117 4' fill='none' stroke='black' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
    --squiggle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M2 6 q 6 -6 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 12 0 t 6 -3' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Explicit choice wins; the system preference is also a no-script fallback. */
:root[data-theme="midnight"] {
    color-scheme: dark;
    --paper: #19232D;
    --ink: #E2EAF0;
    --muted: #A3B4C3;
    --faint: #354553;
    --accent: #A2C8E4;
    --accent-soft: rgba(162, 200, 228, 0.16);
    --code-bg: #243341;
    --syn-keyword: #ef9f74;
    --syn-string: #a9c98b;
    --syn-number: #e2b968;
    --syn-comment: #A3B4C3;
    --syn-name: #8db9df;
    --syn-function: #caa4e5;
    --syn-operator: #A3B4C3;

    --c-info: #84b3d6;
    --c-tip: #96c08c;
    --c-warning: #e0b35e;
    --c-danger: #ec8a78;
    --c-important: #c39bd0;
    --c-note: #A3B4C3;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        color-scheme: dark;
        --paper: #19232D;
        --ink: #E2EAF0;
        --muted: #A3B4C3;
        --faint: #354553;
        --accent: #A2C8E4;
        --accent-soft: rgba(162, 200, 228, 0.16);
        --code-bg: #243341;
        --syn-keyword: #ef9f74;
        --syn-string: #a9c98b;
        --syn-number: #e2b968;
        --syn-comment: #A3B4C3;
        --syn-name: #8db9df;
        --syn-function: #caa4e5;
        --syn-operator: #A3B4C3;

        --c-info: #84b3d6;
        --c-tip: #96c08c;
        --c-warning: #e0b35e;
        --c-danger: #ec8a78;
        --c-important: #c39bd0;
        --c-note: #A3B4C3;
    }
}

/* One persistent, keyboard-accessible theme control on every site page. */
.theme-toggle {
    align-self: center;
    padding: 0.3rem 0.65rem;
    border: 1px solid var(--faint);
    border-radius: 999px;
    background: var(--code-bg);
    color: var(--ink);
    font: inherit;
    line-height: 1.4;
    cursor: pointer;
}
.theme-toggle:hover { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }