/**
 * Theme System - Base variables that themes override
 */

:root,
[data-theme="fire"] {
    /* Default theme (Fire) - these get overridden by theme files */
    --theme-primary: #ff3232;
    --theme-primary-light: #ff6b6b;
    --theme-secondary: #ff8c00;
    --theme-accent: #ff0066;
    --theme-gradient: linear-gradient(135deg, #ff3232 0%, #ff8c00 50%, #ff0066 100%);
    
    --theme-bg-dark: #0a0e27;
    --theme-bg-medium: #1a1f3a;
    --theme-bg-glow-1: rgba(255, 50, 50, 0.15);
    --theme-bg-glow-2: rgba(255, 165, 0, 0.15);
    --theme-bg-glow-3: rgba(255, 0, 100, 0.1);
    
    --theme-card-bg: linear-gradient(135deg, rgba(20, 25, 50, 0.9) 0%, rgba(30, 35, 60, 0.9) 100%);
    --theme-card-border: rgba(255, 100, 100, 0.3);
    --theme-card-border-hover: rgba(255, 100, 100, 0.6);
    --theme-card-glow: rgba(255, 50, 50, 0.3);
    
    --theme-btn-bg: linear-gradient(135deg, rgba(255, 50, 50, 0.2) 0%, rgba(255, 140, 0, 0.2) 100%);
    --theme-btn-border: rgba(255, 100, 100, 0.5);
    --theme-btn-hover-bg: linear-gradient(135deg, rgba(255, 50, 50, 0.4) 0%, rgba(255, 140, 0, 0.4) 100%);
    --theme-btn-glow: 0 4px 15px rgba(255, 50, 50, 0.3);
    --theme-btn-glow-hover: 0 8px 25px rgba(255, 50, 50, 0.5);
    
    --theme-connected-bg: linear-gradient(135deg, rgba(0, 255, 100, 0.3) 0%, rgba(0, 200, 255, 0.3) 100%);
    --theme-connected-border: rgba(0, 255, 100, 0.6);
    --theme-connected-glow: 0 4px 20px rgba(0, 255, 100, 0.4);
    
    --theme-text-accent: #ff6b6b;
    --theme-text-secondary-accent: #ff8c00;
    
    --theme-shadow-glow: 0 0 30px rgba(255, 50, 50, 0.5);
    --theme-shadow-card: 0 8px 32px rgba(0, 0, 0, 0.4);
    
    --theme-progress-bg: linear-gradient(90deg, #ff3232 0%, #ff8c00 50%, #ff0066 100%);
    --theme-progress-glow: 0 0 15px rgba(255, 50, 50, 0.8);
}


/* ============================================
   THEME SWITCHER UI
   ============================================ */

.theme-switcher {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    gap: 8px;
    padding: 8px;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.theme-btn {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.theme-btn:hover {
    transform: scale(1.1);
}

.theme-btn.active {
    border-color: #fff;
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

.theme-btn--fire {
    background: linear-gradient(135deg, #ff3232 0%, #ff8c00 100%);
}

.theme-btn--whoop {
    background: linear-gradient(135deg, #00d4aa 0%, #00b4d8 100%);
}

.theme-btn--neon {
    background: linear-gradient(135deg, #bf00ff 0%, #00f5ff 100%);
}

.theme-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.3s ease;
}

.theme-btn.active::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Tooltip */
.theme-btn[data-tooltip]:hover::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 11px;
    border-radius: 4px;
    white-space: nowrap;
    font-family: var(--font-primary);
}