:root {
    color-scheme: light;
    --color-bg: #f4f1ec;
    --color-bg-alt: #ebe7e1;
    --color-surface: #fcfbf9;
    --color-surface-elevated: #ffffff;
    --color-text: #1b1e24;
    --color-text-muted: #666d78;
    --color-border: rgba(27, 30, 36, 0.12);
    --color-overlay: rgba(24, 26, 31, 0.48);
    --color-accent: #3ABB26;
    --color-accent-strong: #3ABB26;
    --color-hover-bg: rgba(27, 30, 36, 0.04);
    --color-hover-border: rgba(27, 30, 36, 0.22);
    --color-hover-text: var(--color-text);
    --color-hover-accent-bg: rgba(58, 187, 38, 0.14);
    --color-hover-accent-border: rgba(58, 187, 38, 0.32);
    --color-hover-accent-text: var(--color-accent);
    --color-control-hover-bg: rgba(15, 23, 42, 0.52);
    --color-control-hover-border: rgba(226, 232, 240, 0.62);
    --color-success: #15803d;
    --color-danger: #b91c1c;
    --focus-ring: rgba(58, 187, 38, 0.18);
    --header-surface: rgba(252, 251, 249, 0.94);
    --shadow-sm: 0 10px 24px rgba(27, 30, 36, 0.08);
    --shadow-md: 0 22px 48px rgba(27, 30, 36, 0.14);
    --text-primary: var(--color-text);
    --text-muted: var(--color-text-muted);
    --accent: var(--color-accent);
    --accent-strong: var(--color-accent-strong);
    --surface: var(--color-surface);
    --surface-alt: var(--color-bg-alt);
    --border: var(--color-border);
}

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

:root[data-theme="dark"] {
    color-scheme: dark;
    --color-bg: #181a1f;
    --color-bg-alt: #202329;
    --color-surface: #262a31;
    --color-surface-elevated: #2d323a;
    --color-text: #f3f4f6;
    --color-text-muted: #b6bcc7;
    --color-border: rgba(255, 255, 255, 0.1);
    --color-overlay: rgba(0, 0, 0, 0.55);
    --color-accent: #3ABB26;
    --color-accent-strong: #3ABB26;
    --color-hover-bg: rgba(255, 255, 255, 0.08);
    --color-hover-border: rgba(255, 255, 255, 0.24);
    --color-hover-text: var(--color-text);
    --color-hover-accent-bg: rgba(58, 187, 38, 0.16);
    --color-hover-accent-border: rgba(58, 187, 38, 0.38);
    --color-hover-accent-text: var(--color-accent);
    --color-control-hover-bg: rgba(255, 255, 255, 0.14);
    --color-control-hover-border: rgba(255, 255, 255, 0.44);
    --header-surface: rgba(24, 26, 31, 0.95);
    --shadow-sm: 0 14px 30px rgba(0, 0, 0, 0.28);
    --shadow-md: 0 28px 60px rgba(0, 0, 0, 0.38);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        color-scheme: dark;
        --color-bg: #181a1f;
        --color-bg-alt: #202329;
        --color-surface: #262a31;
        --color-surface-elevated: #2d323a;
        --color-text: #f3f4f6;
        --color-text-muted: #b6bcc7;
        --color-border: rgba(255, 255, 255, 0.1);
        --color-overlay: rgba(0, 0, 0, 0.55);
        --color-accent: #3ABB26;
        --color-accent-strong: #3ABB26;
        --color-hover-bg: rgba(255, 255, 255, 0.08);
        --color-hover-border: rgba(255, 255, 255, 0.24);
        --color-hover-text: var(--color-text);
        --color-hover-accent-bg: rgba(58, 187, 38, 0.16);
        --color-hover-accent-border: rgba(58, 187, 38, 0.38);
        --color-hover-accent-text: var(--color-accent);
        --color-control-hover-bg: rgba(255, 255, 255, 0.14);
        --color-control-hover-border: rgba(255, 255, 255, 0.44);
        --header-surface: rgba(24, 26, 31, 0.95);
        --shadow-sm: 0 14px 30px rgba(0, 0, 0, 0.28);
        --shadow-md: 0 28px 60px rgba(0, 0, 0, 0.38);
    }
}