:root[data-theme="dark"] {
    color-scheme: dark;
    --surface-base: #151815;
    --surface-main: #1B1F1B;
    --surface-panel: #1F231F;
    --surface-muted: #292E29;
    --surface-strong: #E7EAE3;
    --text-main: #E7EAE3;
    --text-muted: #98A096;
    --line: #2D322D;
    --line-strong: #3B413B;
    --accent: #7FB680;
    --accent-strong: #A7D3A6;
    --accent-soft: rgba(127, 182, 128, 0.18);
    --warning: color-mix(in srgb, var(--color-warning) 55%, var(--color-white));
    --danger: color-mix(in srgb, var(--color-danger) 66%, var(--color-white));
    --danger-soft: rgba(var(--color-danger-rgb), 0.22);
    --focus: var(--accent);
    --on-accent: #151815;
    --on-accent-strong: #151815;
    --on-danger: #151815;
    --modal-backdrop: rgba(var(--color-black-rgb), 0.60);
    --error-background: color-mix(in srgb, var(--warning) 18%, var(--surface-base));
    --error-shadow: rgba(var(--color-black-rgb), 0.45);
    --reconnect-button: var(--accent);
    --reconnect-button-hover: var(--accent-strong);
    --reconnect-spinner: var(--accent-strong);
    --scrollbar-track: transparent;
    --scrollbar-thumb: #3B413B;
    --scrollbar-thumb-hover: var(--accent);

    --shadow-1: 0 1px 2px rgba(var(--color-black-rgb), 0.4);
    --shadow-2: 0 16px 40px rgba(var(--color-black-rgb), 0.55);
}

@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        color-scheme: dark;
        --surface-base: #151815;
        --surface-main: #1B1F1B;
        --surface-panel: #1F231F;
        --surface-muted: #292E29;
        --surface-strong: #E7EAE3;
        --text-main: #E7EAE3;
        --text-muted: #98A096;
        --line: #2D322D;
        --line-strong: #3B413B;
        --accent: #7FB680;
        --accent-strong: #A7D3A6;
        --accent-soft: rgba(127, 182, 128, 0.18);
        --warning: color-mix(in srgb, var(--color-warning) 55%, var(--color-white));
        --danger: color-mix(in srgb, var(--color-danger) 66%, var(--color-white));
        --danger-soft: rgba(var(--color-danger-rgb), 0.22);
        --focus: var(--accent);
        --on-accent: #151815;
        --on-accent-strong: #151815;
        --on-danger: #151815;
        --modal-backdrop: rgba(var(--color-black-rgb), 0.60);
        --error-background: color-mix(in srgb, var(--warning) 18%, var(--surface-base));
        --error-shadow: rgba(var(--color-black-rgb), 0.45);
        --reconnect-button: var(--accent);
        --reconnect-button-hover: var(--accent-strong);
        --reconnect-spinner: var(--accent-strong);
        --scrollbar-track: transparent;
        --scrollbar-thumb: #3B413B;
        --scrollbar-thumb-hover: var(--accent);

        --shadow-1: 0 1px 2px rgba(var(--color-black-rgb), 0.4);
        --shadow-2: 0 16px 40px rgba(var(--color-black-rgb), 0.55);
    }
}