/* Bassode Theme System - Global CSS Variables */

/* Light Theme (Default) - Roon-inspired */
:root {
    /* Primary colors */
    --primary-color: #6366f1;
    --primary-hover: #4f46e5;
    --primary-light: #818cf8;
    
    /* Backgrounds */
    --bg-primary: #f5f5f5;
    --bg-secondary: #ffffff;
    --bg-tertiary: #fafafa;
    
    /* Button colors */
    --secondary-button-bg: #d8dce6;
    --secondary-button-hover: #c8ccd9;
    
    /* Glass/Floating buttons */
    --glass-button-bg: #e8eaf0;
    --glass-button-hover: #d8dce6;
    --glass-button-border: #c8ccd9;
    --glass-button-text: #2b2b2b;
    
    /* Text colors */
    --text-primary: #2b2b2b;
    --text-secondary: #6b6b6b;
    --text-tertiary: #9b9b9b;
    
    /* Borders */
    --border-color: #e5e5e5;
    --border-hover: #d0d0d0;
    
    /* Status colors */
    --error-color: #ef4444;
    --error-bg: #fef2f2;
    --error-border: #fecaca;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --info-color: #6366f1;
    --info-bg: #eef2ff;
    --info-border: #c7d2fe;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.08);
    
    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.4);
    --overlay-blur: blur(4px);
}

/* Dark Theme (Roon-inspired) */
[data-theme="dark"] {
    /* Primary colors - keep blue accent */
    --primary-color: #6366f1;
    --primary-hover: #5558e3;
    --primary-light: #818cf8;
    
    /* Backgrounds - Dark like Roon */
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;
    
    /* Button colors */
    --secondary-button-bg: #252525;
    --secondary-button-hover: #303030;
    
    /* Glass/Floating buttons */
    --glass-button-bg: rgba(255, 255, 255, 0.1);
    --glass-button-hover: rgba(255, 255, 255, 0.2);
    --glass-button-border: rgba(255, 255, 255, 0.3);
    --glass-button-text: #e0e0e0;
    
    /* Text colors - Light on dark */
    --text-primary: #e0e0e0;
    --text-secondary: #999;
    --text-tertiary: #666;
    
    /* Borders - Subtle on dark */
    --border-color: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(255, 255, 255, 0.15);
    
    /* Status colors */
    --error-color: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.1);
    --error-border: rgba(239, 68, 68, 0.3);
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --info-color: #6366f1;
    --info-bg: rgba(99, 102, 241, 0.1);
    --info-border: rgba(99, 102, 241, 0.3);
    
    /* Shadows - Deeper on dark */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
    
    /* Overlays */
    --overlay-bg: rgba(0, 0, 0, 0.9);
    --overlay-blur: blur(4px);
}

/* Auto dark theme based on system preference */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        /* Primary colors */
        --primary-color: #6366f1;
        --primary-hover: #5558e3;
        --primary-light: #818cf8;
        
        /* Backgrounds */
        --bg-primary: #0f0f0f;
        --bg-secondary: #1a1a1a;
        --bg-tertiary: #252525;
        
        /* Button colors */
        --secondary-button-bg: #252525;
        --secondary-button-hover: #303030;
        
        /* Glass/Floating buttons */
        --glass-button-bg: rgba(255, 255, 255, 0.1);
        --glass-button-hover: rgba(255, 255, 255, 0.2);
        --glass-button-border: rgba(255, 255, 255, 0.3);
        --glass-button-text: #e0e0e0;
        
        /* Text colors */
        --text-primary: #e0e0e0;
        --text-secondary: #999;
        --text-tertiary: #666;
        
        /* Borders */
        --border-color: rgba(255, 255, 255, 0.08);
        --border-hover: rgba(255, 255, 255, 0.15);
        
        /* Status colors */
        --error-color: #ef4444;
        --error-bg: rgba(239, 68, 68, 0.1);
        --error-border: rgba(239, 68, 68, 0.3);
        --success-color: #10b981;
        --warning-color: #f59e0b;
        --info-color: #6366f1;
        --info-bg: rgba(99, 102, 241, 0.1);
        --info-border: rgba(99, 102, 241, 0.3);
        
        /* Shadows */
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
        --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.8);
        
        /* Overlays */
        --overlay-bg: rgba(0, 0, 0, 0.9);
        --overlay-blur: blur(4px);
    }
}

/* Smooth transitions for theme changes */
* {
    transition: background-color 0.2s ease, 
                color 0.2s ease, 
                border-color 0.2s ease;
}

/* Disable transitions on first load */
.no-transitions * {
    transition: none !important;
}