:root {
    color-scheme: dark;
    --page-bg: #0b1020;
    --surface: #131b2e;
    --surface-raised: #18233a;
    --surface-subtle: #0f1627;
    --surface-muted: #0b1628;
    --row-alt: #0f1524;
    --text: #eaf0f8;
    --text-muted: #b7c2d4;
    --text-subtle: #98a8bf;
    --border: #314566;
    --border-subtle: #243b53;
    --primary: #38bdf8;
    --primary-hover: #7dd3fc;
    --on-primary: #07111f;
    --secondary: #243b53;
    --secondary-hover: #314d70;
    --on-secondary: #f8fafc;
    --success: #34d399;
    --on-success: #052e24;
    --warning: #fbbf24;
    --on-warning: #271500;
    --danger: #f87171;
    --danger-strong: #ef4444;
    --on-danger: #260708;
    --info: #38bdf8;
    --on-info: #07111f;
    --completed: #f59e0b;
    --on-completed: #241000;
    --chip-bg: #1f2937;
    --chip-text: #f1f5f9;
    --code: #7dd3fc;
    --overlay: rgba(0, 0, 0, .62);
    --shadow: 0 8px 28px rgba(0, 0, 0, .32);
    --shadow-modal: 0 16px 52px rgba(0, 0, 0, .48);
    --focus: #38bdf8;
    --success-message-bg: #123c35;
    --error-message-bg: #451c27;
    --dual-active: #ff9b9b;
}

:root[data-theme="light"] {
    color-scheme: light;
    --page-bg: #eef3f8;
    --surface: #ffffff;
    --surface-raised: #ffffff;
    --surface-subtle: #f3f6fa;
    --surface-muted: #e8eef5;
    --row-alt: #f4f7fb;
    --text: #172033;
    --text-muted: #44546a;
    --text-subtle: #5d6c80;
    --border: #9aabc0;
    --border-subtle: #c6d1de;
    --primary: #0369a1;
    --primary-hover: #075985;
    --on-primary: #ffffff;
    --secondary: #d9e3ee;
    --secondary-hover: #c6d4e3;
    --on-secondary: #172033;
    --success: #047857;
    --on-success: #ffffff;
    --warning: #b45309;
    --on-warning: #ffffff;
    --danger: #b91c1c;
    --danger-strong: #991b1b;
    --on-danger: #ffffff;
    --info: #0369a1;
    --on-info: #ffffff;
    --completed: #a34d05;
    --on-completed: #ffffff;
    --chip-bg: #dce6f0;
    --chip-text: #172033;
    --code: #075985;
    --overlay: rgba(15, 23, 42, .46);
    --shadow: 0 8px 24px rgba(30, 41, 59, .13);
    --shadow-modal: 0 16px 48px rgba(30, 41, 59, .22);
    --focus: #0369a1;
    --success-message-bg: #d8f5ea;
    --error-message-bg: #fee2e2;
    --dual-active: #991b1b;
}

* { box-sizing: border-box; }

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

input::placeholder, textarea::placeholder { color: var(--text-subtle); opacity: 1; }
::selection { background: var(--primary); color: var(--on-primary); }

body, .card, input, select, textarea, button, a, th, td, .modal-card {
    transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 112px;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 7px 10px;
    background: var(--secondary);
    color: var(--on-secondary);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.theme-toggle:hover { background: var(--secondary-hover); }
.theme-toggle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    body, .card, input, select, textarea, button, a, th, td, .modal-card { transition: none; }
}