/* Dark Mode Styles */
/* Using CSS Variables with theme support */

[data-theme="dark"] {
    --color-background: #0F172A;
    --color-surface: #1E293B;
    --color-surface-hover: #334155;
    --color-text-primary: #F1F5F9;
    --color-text-secondary: #CBD5E1;
    --color-text-tertiary: #94A3B8;
    --color-border: #334155;
    --color-border-hover: #475569;
    --gradient-background: linear-gradient(135deg, #0F172A 0%, #1E293B 100%);
}

.theme-toggle {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: var(--radius-full);
    width: 48px;
    height: 48px;
    font-size: 24px;
    cursor: pointer;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
    display: none !important; /* Hidden per user request - available in help menu */
    align-items: center;
    justify-content: center;
    visibility: hidden !important;
    opacity: 0 !important;
}

.theme-toggle:hover {
    background: var(--color-surface-hover);
    transform: scale(1.1);
    box-shadow: var(--shadow-lg);
}

.theme-toggle:active {
    transform: scale(0.95);
}

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

/* Override transitions for specific elements that shouldn't animate */
canvas,
svg,
img {
    transition: none;
}