@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg: #101624;
        --surface: #172033;
        --text: #eef3ff;
        --muted: #aab4c5;
        --primary: #60a5fa;
        --border: #2a3548;
        --danger: #f87171;
    }

    .button.secondary {
        background: #1e3a5f;
        color: #dbeafe;
    }

    input,
    select,
    textarea {
        background: #101624;
        color: var(--text);
    }

    .auth-page {
        background:
            radial-gradient(circle at 18% 18%, rgba(96, 165, 250, 0.18), transparent 28%),
            radial-gradient(circle at 82% 12%, rgba(167, 139, 250, 0.16), transparent 26%),
            repeating-linear-gradient(45deg, rgba(96, 165, 250, 0.05) 0 1px, transparent 1px 18px),
            var(--bg);
    }

    .password-meter {
        background: #2a3548;
    }
}

.dark {
    color-scheme: dark;
    --bg: #101624;
    --surface: #172033;
    --surface-soft: #202b40;
    --text: #eef3ff;
    --muted: #aab4c5;
    --primary: #818cf8;
    --primary-strong: #6366f1;
    --accent: #a78bfa;
    --success: #22c55e;
    --border: #2a3548;
    --danger: #f87171;
    --shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.dark .button.secondary,
.dark .icon-button,
.dark .check-item,
.dark .stat-icon,
.dark .progress-track {
    background: #202b40;
}

.dark .icon-button:hover {
    background: #293755;
}

.dark input,
.dark select,
.dark textarea {
    background: #101624;
    color: var(--text);
}

.dark .streak-pill {
    background: rgba(251, 146, 60, 0.14);
    border-color: rgba(251, 146, 60, 0.34);
    color: #fdba74;
}

.dark .streak-days span {
    background: #2a3548;
}

.dark .streak-days span.active {
    background: #16a34a;
}