/* Theme System - CSS Variables */
:root {
    /* Light mode (default) */
    --bg-primary: #fff;
    --bg-secondary: #f7f9f9;
    --bg-tertiary: #e7e9ea;
    --text-primary: #0f1419;
    --text-secondary: #536471;
    --text-muted: #71767b;
    --border-color: #cfd9de;
    --accent-color: #1d9bf0;
    --accent-hover: #1a8cd8;
    --hover-bg: rgba(15, 20, 25, 0.1);
    --card-bg: #f7f9f9;
    --gradient-start: #667eea;
    --gradient-end: #764ba2;
}

/* Dark mode */
[data-theme="dark"] {
    --bg-primary: #000;
    --bg-secondary: #16181c;
    --bg-tertiary: #2f3336;
    --text-primary: #e7e9ea;
    --text-secondary: #71767b;
    --text-muted: #536471;
    --border-color: #2f3336;
    --accent-color: #1d9bf0;
    --accent-hover: #1a8cd8;
    --hover-bg: rgba(231, 233, 234, 0.1);
    --card-bg: #16181c;
}

/* System preference detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #000;
        --bg-secondary: #16181c;
        --bg-tertiary: #2f3336;
        --text-primary: #e7e9ea;
        --text-secondary: #71767b;
        --text-muted: #536471;
        --border-color: #2f3336;
        --accent-color: #1d9bf0;
        --accent-hover: #1a8cd8;
        --hover-bg: rgba(231, 233, 234, 0.1);
        --card-bg: #16181c;
        --gradient-start: #667eea;
        --gradient-end: #764ba2;
    }
}

/* Theme Toggle Button */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-secondary);
    transition: background 0.2s, color 0.2s;
}

.theme-toggle:hover {
    background: var(--hover-bg);
    color: var(--text-primary);
}

.theme-toggle svg {
    width: 20px;
    height: 20px;
}

.theme-toggle .sun-icon {
    display: none;
}

.theme-toggle .moon-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: block;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: none;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .theme-toggle .sun-icon {
        display: block;
    }
    :root:not([data-theme="light"]) .theme-toggle .moon-icon {
        display: none;
    }
}

[data-theme="light"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="light"] .theme-toggle .moon-icon {
    display: block;
}