/* ==========================================
   DARK THEME
   ========================================== */

body.theme-dark,
body.theme-auto.system-dark {
    /* Colors - Dark Theme */
    --color-primary: #818CF8;
    --color-primary-dark: #6366F1;
    --color-primary-light: #A5B4FC;
    --color-secondary: #A78BFA;
    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #F87171;
    --color-info: #60A5FA;
    
    /* Background Colors */
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --bg-tertiary: #334155;
    --bg-elevated: #1E293B;
    
    /* Text Colors */
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-tertiary: #64748B;
    --text-inverse: #0F172A;
    
    /* Border Colors */
    --border-color: #334155;
    --border-color-dark: #475569;
    
    /* Shadow (darker for dark mode) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Specific dark mode adjustments */
body.theme-dark .habit-card,
body.theme-auto.system-dark .habit-card {
    background-color: var(--bg-elevated);
}

body.theme-dark .habit-card:hover,
body.theme-auto.system-dark .habit-card:hover {
    background-color: #2D3748;
}

body.theme-dark .stat-card,
body.theme-auto.system-dark .stat-card {
    background-color: var(--bg-elevated);
}

body.theme-dark .form-group input,
body.theme-dark .form-group select,
body.theme-dark .form-group textarea,
body.theme-auto.system-dark .form-group input,
body.theme-auto.system-dark .form-group select,
body.theme-auto.system-dark .form-group textarea {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color-dark);
    color: var(--text-primary);
}

body.theme-dark .modal-content,
body.theme-auto.system-dark .modal-content {
    background-color: var(--bg-elevated);
}

body.theme-dark .toast,
body.theme-auto.system-dark .toast {
    background-color: var(--bg-elevated);
    border-color: var(--border-color);
}

/* Theme toggle animation */
.theme-transition {
    transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    body.theme-auto {
        /* Variables are already set above when .system-dark is added */
    }
}