/* FILE: css/theme.css */
/* Theme Variables - Dark & Light Modes */

:root {
    /* Colors - Light Theme (Default) */
    --bg-primary: #F5F7FC;
    --bg-secondary: #EEF2F7;
    --bg-white: #ffffff;
    --bg-dark: #0B1E36;
    --bg-dark-light: #1A3A5C;
    
    --text-primary: #1F2A44;
    --text-secondary: #5A6E8A;
    --text-white: #ffffff;
    --text-muted: #8A9BB5;
    
    --brand-teal: #00B4D8;
    --brand-teal-dark: #0096B8;
    --brand-teal-glow: rgba(0, 180, 216, 0.1);
    --brand-purple: #8B5CF6;
    --brand-success: #10B981;
    --brand-warning: #F59E0B;
    --brand-danger: #EF4444;
    
    --border-color: #E2EDF2;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 20px 35px -10px rgba(0, 0, 0, 0.1);
    
    --radius-sm: 12px;
    --radius-md: 20px;
    --radius-lg: 28px;
    
    --transition: all 0.3s ease;
    --font-family: 'Inter', sans-serif;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #0B1E36;
    --bg-secondary: #13294B;
    --bg-white: #1A3A5C;
    --bg-dark: #061224;
    
    --text-primary: #F5F7FC;
    --text-secondary: #B0C4DE;
    --text-muted: #6A8BAE;
    
    --border-color: #2A4A6C;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 35px -10px rgba(0, 0, 0, 0.5);
}

/* Theme Toggle Button */
.theme-toggle {
    background: none;
    border: none;
    color: var(--text-white);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem;
    border-radius: 50%;
    transition: var(--transition);
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}