:root,
[data-theme="light"] {
    --color-page-bg: #ffffff;
    --color-surface: rgba(255, 255, 255, 0.92);
    --color-text: #111111;
    --color-muted: #666666;
    --color-border: rgba(0, 0, 0, 0.16);
    --color-focus: #2b8fa6;
    --font-scale: 1;
    --font-min-size: 1rem;
}

[data-theme="dark"] {
    --color-page-bg: #111111;
    --color-surface: rgba(30, 30, 34, 0.94);
    --color-text: #f2f2f2;
    --color-muted: #b8b8b8;
    --color-border: rgba(255, 255, 255, 0.18);
    --color-focus: #78cad5;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-page-bg: #111111;
        --color-surface: rgba(30, 30, 34, 0.94);
        --color-text: #f2f2f2;
        --color-muted: #b8b8b8;
        --color-border: rgba(255, 255, 255, 0.18);
        --color-focus: #78cad5;
    }
}

[data-text-size="large"] { --font-scale: 1.12; }
[data-text-size="xlarge"] { --font-scale: 1.28; }

html[data-text-size="large"] { font-size: 112%; }
html[data-text-size="xlarge"] { font-size: 128%; }

html {
    background: var(--color-page-bg);
    color: var(--color-text);
}

body {
    background: var(--color-page-bg);
    color: var(--color-text);
    font-size: max(var(--font-min-size), calc(1rem * var(--font-scale)));
}

a { color: inherit; }

button,
select {
    color: inherit;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

:focus-visible {
    outline: 3px solid var(--color-focus);
    outline-offset: 2px;
}

.site-display-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    justify-content: flex-end;
}

.site-display-controls[hidden] { display: none; }

.site-display-controls button {
    appearance: none;
    padding: 0.35rem 0.65rem;
    font: inherit;
    font-size: max(var(--font-min-size), 0.78rem);
    line-height: 1.2;
    cursor: pointer;
}

.site-display-controls button[aria-pressed="true"] {
    border-color: var(--color-focus);
    box-shadow: inset 0 -2px 0 var(--color-focus);
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}