:root {
    /* Light Mode Colors */
    --background-light: #f8f9fa;
    --text-primary-light: #212529;
    --text-secondary-light: #495057;
    --accent-light: #6200ee;
    --card-bg-light: #ffffff;
    --card-shadow-light: rgba(0, 0, 0, 0.1);
    --nav-bg-light: rgba(255, 255, 255, 0.9);
    
    /* Dark Mode Colors */
    --background-dark: #121212;
    --text-primary-dark: #e9ecef;
    --text-secondary-dark: #adb5bd;
    --accent-dark: #bb86fc;
    --card-bg-dark: #1e1e1e;
    --card-shadow-dark: rgba(0, 0, 0, 0.3);
    --nav-bg-dark: rgba(30, 30, 30, 0.9);
    
    /* Default Theme (System) */
    --background: var(--background-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --card-bg: var(--card-bg-light);
    --card-shadow: var(--card-shadow-light);
    --nav-bg: var(--nav-bg-light);
}

/* Apply Dark Mode if system preference is dark */
@media (prefers-color-scheme: dark) {
    :root {
        --background: var(--background-dark);
        --text-primary: var(--text-primary-dark);
        --text-secondary: var(--text-secondary-dark);
        --accent: var(--accent-dark);
        --card-bg: var(--card-bg-dark);
        --card-shadow: var(--card-shadow-dark);
        --nav-bg: var(--nav-bg-dark);
    }
}

/* Dark Mode Class (for manual toggle) */
.dark-mode {
    --background: var(--background-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --accent: var(--accent-dark);
    --card-bg: var(--card-bg-dark);
    --card-shadow: var(--card-shadow-dark);
    --nav-bg: var(--nav-bg-dark);
}

/* Light Mode Class (for manual toggle) */
.light-mode {
    --background: var(--background-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --accent: var(--accent-light);
    --card-bg: var(--card-bg-light);
    --card-shadow: var(--card-shadow-light);
    --nav-bg: var(--nav-bg-light);
}

/* Theme Toggle Styles */
.theme-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    color: var(--text-primary);
    opacity: 0.6;
    transition: opacity 0.3s ease;
}

.theme-btn.active {
    opacity: 1;
    color: var(--accent);
}

.theme-btn:hover {
    opacity: 1;
}