/* Themes CSS - Light and Dark mode variables */

:root {
    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

/* Light Theme */
[data-theme="light"] {
    /* Background Colors */
    --bg-primary: #f8fafc;
    --bg-secondary: #f1f5f9;
    --bg-card: #ffffff;
    --bg-header: #ffffff;
    --bg-hover: #e2e8f0;
    
    /* Text Colors */
    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;
    --text-dark: #0f172a;
    
    /* Border Colors */
    --border-color: #e2e8f0;
    
    /* Accent Colors */
    --accent-primary: #3b82f6;
    --accent-primary-hover: #2563eb;
    --accent-primary-light: rgba(59, 130, 246, 0.1);
    
    /* Status Colors */
    --color-success: #22c55e;
    --color-success-hover: #16a34a;
    --color-success-light: rgba(34, 197, 94, 0.1);
    
    --color-danger: #ef4444;
    --color-danger-hover: #dc2626;
    --color-danger-light: rgba(239, 68, 68, 0.1);
    
    --color-warning: #f59e0b;
    --color-warning-hover: #d97706;
    --color-warning-light: rgba(245, 158, 11, 0.1);
    --color-warning-dark: #92400e;
    
    --color-info: #3b82f6;
    --color-info-light: rgba(59, 130, 246, 0.1);
}

/* Dark Theme */
[data-theme="dark"] {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-card: #1e293b;
    --bg-header: #1e293b;
    --bg-hover: #334155;
    
    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #64748b;
    --text-dark: #f8fafc;
    
    /* Border Colors */
    --border-color: #334155;
    
    /* Accent Colors */
    --accent-primary: #60a5fa;
    --accent-primary-hover: #3b82f6;
    --accent-primary-light: rgba(96, 165, 250, 0.15);
    
    /* Status Colors */
    --color-success: #4ade80;
    --color-success-hover: #22c55e;
    --color-success-light: rgba(74, 222, 128, 0.15);
    
    --color-danger: #f87171;
    --color-danger-hover: #ef4444;
    --color-danger-light: rgba(248, 113, 113, 0.15);
    
    --color-warning: #fbbf24;
    --color-warning-hover: #f59e0b;
    --color-warning-light: rgba(251, 191, 36, 0.15);
    --color-warning-dark: #fcd34d;
    
    --color-info: #60a5fa;
    --color-info-light: rgba(96, 165, 250, 0.15);
    
    /* Shadows for dark mode */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
}

/* Smooth transitions for theme switching */
body,
.main-header,
.nav-btn,
.btn,
.card,
.modal,
.toast,
.form-input,
.form-select,
.form-textarea,
.dashboard-card,
.cooking-mode {
    transition: background-color 0.3s ease, 
                border-color 0.3s ease, 
                color 0.3s ease,
                box-shadow 0.3s ease;
}