/**
 * Themes CSS
 * Dark/Light theme toggles
 */

/* Theme toggle button */
.theme-toggle {
    background: var(--color-surface-hover);
    border: 1px solid var(--color-border);
    padding: var(--space-2);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
}

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

.theme-icon {
    font-size: var(--text-lg);
}

/* Dark mode specific overrides */
[data-theme="dark"] {
    color-scheme: dark;
}

[data-theme="dark"] .card-glass {
    background: rgba(30, 41, 59, 0.7);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .login-container {
    background: linear-gradient(135deg, hsl(210, 30%, 12%) 0%, hsl(210, 30%, 8%) 100%);
}

[data-theme="dark"] .pin-key {
    background: var(--color-surface-hover);
}

[data-theme="dark"] .pin-key:hover {
    background: var(--color-primary-light);
}

/* Smooth theme transition */
body {
    transition: background-color var(--transition-base), color var(--transition-base);
}

* {
    transition-property: background-color, border-color, color;
}

*:not(.btn):not(.badge):not(.alert) {
    transition-duration: var(--transition-base);
}