/* The existing palette remains the default, including without JavaScript. */
:root {
    color-scheme: dark;
    --yellow: #faca30;
    --dark: #222222;
    --light: #efefef;
    --muted: #b8b8b2;
    --line: #494946;
    --surface: #292928;
    --surface-selected: #30302a;
    --surface-hover: #303030;
    --scene-surface: #242424;
    --line-subtle: #3e3e3e;
    --line-emphasis: #575757;
    --motion-border: #626262;
    --control-border: #6a6a6a;
    --copy-color: #d0d0d0;
    --tag-color: #d0d0ca;
    --accent-fill: #faca30;
    --accent-hover: #ffe17b;
    --on-accent: #222222;
    --logo-filter: brightness(0) invert(1);
    --diagram-line: #ffffff;
    --diagram-muted: #b4b4b4;
    --diagram-accent: #faca30;
    --diagram-highlight: #fff1b5;
}

:root[data-theme="light"] {
    color-scheme: light;
    --yellow: #805b00;
    --dark: #f7f6f2;
    --light: #242424;
    --muted: #5c5b55;
    --line: #d1cec5;
    --surface: #efede7;
    --surface-selected: #eee5c8;
    --surface-hover: #e8e5dc;
    --scene-surface: #fffefa;
    --line-subtle: #dedbd2;
    --line-emphasis: #c4c0b5;
    --motion-border: #8b877c;
    --control-border: #8b877c;
    --copy-color: #46453f;
    --tag-color: #4f4d45;
    --logo-filter: brightness(0);
    --diagram-line: #33332f;
    --diagram-muted: #656258;
    --diagram-accent: #9a6b00;
    --diagram-highlight: #805b00;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 0;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
}
.theme-toggle[hidden] { display: none !important; }
.theme-toggle:hover { color: var(--yellow); border-color: var(--yellow); }
.theme-toggle:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.theme-toggle svg { display: block; width: 22px; height: 22px; }
.theme-toggle .theme-icon-moon { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .theme-icon-moon { display: block; }

/* Keep the legal pages' existing layout and dark styling. */
.legacy-page .theme-toggle { margin: 3px 15px; }
:root[data-theme="light"] .legacy-page { color: var(--light); }
:root[data-theme="light"] .legacy-page .sheet-1,
:root[data-theme="light"] .legacy-page #footer { color: var(--light); background: var(--surface); }
:root[data-theme="light"] .legacy-page .sheet-2 { background: var(--dark); }
:root[data-theme="light"] .legacy-page a,
:root[data-theme="light"] .legacy-page .navbar-text { color: var(--yellow); }
:root[data-theme="light"] .legacy-page .navbar-nav > li > a::before { border-color: var(--yellow); }