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

/* Explicit dark mode. */
:root[data-theme="dark"] {
    --theme-canvas: #171c17;
    --theme-panel: #222922;
    --theme-panel-soft: #283228;
    --theme-panel-hover: #323e30;
    --theme-panel-selected: #394b34;
    --theme-ink: #f0f3ed;
    --theme-muted: #b8c4b6;
    --theme-accent: #b9d99d;
    --theme-line: #465344;
    --theme-control-line: #869383;
    --theme-focus: #bede91;
    --theme-selection: #48643e;
    --theme-danger: #ffb7ab;
    --theme-danger-panel: #482925;
    --theme-danger-line: #bb7063;
    --theme-warning: #f6d595;
    --theme-warning-panel: #42351f;
    --theme-warning-line: #b49557;
    --theme-info: #b9ddf6;
    --theme-info-panel: #263d4e;
    --theme-info-line: #75a5c2;
    --theme-violet: #e1c7f4;
    --theme-violet-panel: #3c3047;
    --theme-violet-line: #b096c5;
    --theme-teal: #b4e5e3;
    --theme-teal-panel: #223c3c;
    --theme-teal-line: #69a8a7;
    --theme-success: #c4e5b9;
    --theme-success-panel: #304431;
    --theme-success-line: #87ad82;
    --theme-shadow: #0008;
}

/* CSS also follows the system on pages that have not loaded JavaScript. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --theme-canvas: #171c17;
        --theme-panel: #222922;
        --theme-panel-soft: #283228;
        --theme-panel-hover: #323e30;
        --theme-panel-selected: #394b34;
        --theme-ink: #f0f3ed;
        --theme-muted: #b8c4b6;
        --theme-accent: #b9d99d;
        --theme-line: #465344;
        --theme-control-line: #869383;
        --theme-focus: #bede91;
        --theme-selection: #48643e;
        --theme-danger: #ffb7ab;
        --theme-danger-panel: #482925;
        --theme-danger-line: #bb7063;
        --theme-warning: #f6d595;
        --theme-warning-panel: #42351f;
        --theme-warning-line: #b49557;
        --theme-info: #b9ddf6;
        --theme-info-panel: #263d4e;
        --theme-info-line: #75a5c2;
        --theme-violet: #e1c7f4;
        --theme-violet-panel: #3c3047;
        --theme-violet-line: #b096c5;
        --theme-teal: #b4e5e3;
        --theme-teal-panel: #223c3c;
        --theme-teal-line: #69a8a7;
        --theme-success: #c4e5b9;
        --theme-success-panel: #304431;
        --theme-success-line: #87ad82;
        --theme-shadow: #0008;
    }
}