/* ========================================
   MVidarr Centralized Theme System
   Comprehensive CSS Variables for All Themes
======================================== */

/* Default Theme (Current Dark) - Baseline */
:root,
[data-theme="default"] {
    /* Base Colors */
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --bg-tertiary: #3a3a3a;
    --bg-modal: #333333;
    --bg-card: #2a2a2a;
    --bg-hover: #404040;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --text-muted: #888888;
    --text-accent: #4a9eff;
    --text-inverse: #000000;
    
    /* Border Colors */
    --border-primary: #444444;
    --border-secondary: #555555;
    --border-focus: #4a9eff;
    --border-focus-shadow: rgba(74, 158, 255, 0.1);
    --border-hover: #666666;
    
    /* Button Colors */
    --btn-primary-bg: #4a9eff;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #3a8eef;
    --btn-secondary-bg: #666666;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover: #777777;
    --btn-secondary-darker: #484e53;
    --secondary-shadow: rgba(108, 117, 125, 0.3);
    --btn-danger-bg: #dc3545;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #c82333;
    --btn-danger-darker: #a01e2a;
    --danger-shadow: rgba(220, 53, 69, 0.3);
    
    /* Status Colors */
    --success: #28a745;
    --success-dark: #1e7e34;
    --success-darker: #155724;
    --success-shadow: rgba(40, 167, 69, 0.3);
    --warning: #ffc107;
    --warning-dark: #d39e00;
    --warning-darker: #b08800;
    --warning-shadow: rgba(255, 193, 7, 0.3);
    --error: #dc3545;
    --error-color: #ff6b6b;
    --info: #17a2b8;
    --info-dark: #117a8b;
    --info-darker: #0c5460;
    --info-shadow: rgba(23, 162, 184, 0.3);
    
    /* Form Colors */
    --input-bg: #3a3a3a;
    --input-text: #ffffff;
    --input-border: #555555;
    --input-focus: #4a9eff;
    
    /* Sidebar & Navigation */
    --nav-bg: #2d2d2d;
    --nav-text: #ffffff;
    --nav-hover: #404040;
    --nav-active: #4a9eff;
    --sidebar-bg: #1a1a1a;
    --sidebar-bg-secondary: #2d2d2d;
    --search-bar-bg: #2d2d2d;
    --top-bar-bg: #2d2d2d;
    
    /* Shadow */
    --shadow: rgba(0, 0, 0, 0.3);
    --shadow-hover: rgba(0, 0, 0, 0.5);
    
    /* Typography Scale - Modern, Accessible Font System */
    --font-size-display: clamp(2.5rem, 5vw, 4rem);    /* Hero headings */
    --font-size-h1: clamp(2rem, 4vw, 3rem);           /* Page titles */
    --font-size-h2: clamp(1.5rem, 3vw, 2.25rem);      /* Section headers */
    --font-size-h3: clamp(1.25rem, 2.5vw, 1.875rem);  /* Subsection headers */
    --font-size-h4: clamp(1.125rem, 2vw, 1.5rem);     /* Component headers */
    --font-size-base: 1rem;                           /* Body text baseline */
    --font-size-sm: 0.875rem;                         /* Small text */
    --font-size-xs: 0.75rem;                          /* Caption text */
    
    /* Line Heights for Optimal Readability */
    --line-height-tight: 1.25;                        /* Headlines */
    --line-height-normal: 1.5;                        /* Body text */
    --line-height-relaxed: 1.75;                      /* Long-form content */
    
    /* Font Weights */
    --font-weight-light: 300;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    
    /* Spacing Scale - Consistent Visual Rhythm */
    --space-px: 1px;
    --space-0: 0;
    --space-1: 0.25rem;   /* 4px */
    --space-2: 0.5rem;    /* 8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px */
    --space-8: 2rem;      /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */
    --space-20: 5rem;     /* 80px */
    --space-24: 6rem;     /* 96px */
    
    /* Border Radius Scale */
    --radius-none: 0;
    --radius-sm: 0.125rem;   /* 2px */
    --radius-md: 0.375rem;   /* 6px */
    --radius-lg: 0.5rem;     /* 8px */
    --radius-xl: 0.75rem;    /* 12px */
    --radius-2xl: 1rem;      /* 16px */
    --radius-full: 9999px;
    
    /* Transition System */
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* Extended Variables for Complete Theme Coverage */
    --pageBackground: var(--bg-primary);
    --textColor: var(--text-primary);
    --borderColor: var(--border-primary);
    --cardBackgroundColor: var(--bg-card);
    --cardShadowColor: var(--shadow);
    --modalBackgroundColor: var(--bg-modal);
    --modalBackdropBackgroundColor: rgba(0, 0, 0, 0.5);
    --modalCloseButtonHoverColor: var(--text-accent);
    --modal-overlay: rgba(0, 0, 0, 0.7);
    --accent-secondary: #0099cc;
    --accent-dark: #007799;
    --accent-shadow: rgba(0, 212, 255, 0.2);
    --popoverBodyBackgroundColor: var(--bg-secondary);
    --popoverTitleBackgroundColor: var(--bg-secondary);
    --popoverTitleBorderColor: var(--border-primary);
    --popoverShadowColor: var(--shadow);
    --popoverShadowInverseColor: var(--shadow-hover);
    --popoverArrowBorderColor: var(--border-primary);
    --popoverArrowBorderInverseColor: var(--border-secondary);
    --tableRowHoverBackgroundColor: var(--bg-hover);
    --inputBackgroundColor: var(--input-bg);
    --inputBorderColor: var(--input-border);
    --inputHoverBackgroundColor: var(--bg-hover);
    --inputFocusBorderColor: var(--input-focus);
    --inputSelectedBackgroundColor: var(--bg-hover);
    --inputReadOnlyBackgroundColor: var(--bg-tertiary);
    --inputBoxShadowColor: rgba(0, 0, 0, 0.075);
    --inputFocusBoxShadowColor: rgba(74, 158, 255, 0.25);
    --inputErrorBorderColor: var(--error);
    --inputErrorBoxShadowColor: rgba(220, 53, 69, 0.25);
    --inputWarningBorderColor: var(--warning);
    --inputWarningBoxShadowColor: rgba(255, 193, 7, 0.25);
    --menuItemColor: var(--text-primary);
    --menuItemHoverColor: var(--text-primary);
    --menuItemHoverBackgroundColor: var(--bg-hover);
    --toolbarMenuItemBackgroundColor: var(--bg-secondary);
    --toolbarMenuItemHoverBackgroundColor: var(--bg-hover);
    --toobarButtonHoverColor: var(--text-accent);
    --albumBackgroundColor: var(--bg-card);
    --artistBackgroundColor: var(--bg-card);
    --trackBackgroundColor: var(--bg-card);
    --calendarBackgroundColor: var(--bg-secondary);
    --calendarBorderColor: var(--border-primary);
    --calendarTodayBackgroundColor: var(--bg-hover);
    --calendarTextDimAlternate: var(--text-muted);
    --scrollbarBackgroundColor: var(--border-secondary);
    --scrollbarHoverBackgroundColor: var(--border-hover);
    --alertDangerBackgroundColor: var(--bg-secondary);
    --alertSuccessBackgroundColor: var(--bg-secondary);
    --alertWarningBackgroundColor: var(--bg-secondary);
    --alertInfoBackgroundColor: var(--bg-secondary);
    --alertWarningColor: var(--warning);
    --pageHeaderBackgroundColor: var(--bg-secondary);
    --toolbarBackgroundColor: var(--bg-secondary);
    --sidebarActiveBackgroundColor: var(--bg-hover);
    --logEventsBackgroundColor: var(--bg-secondary);
    --disabledColor: var(--text-muted);
    --disabledInputColor: var(--text-muted);
    --disabledCheckInputColor: var(--text-muted);
    --helpTextColor: var(--text-muted);
    --advancedFormLabelColor: var(--text-accent);
    --linkHoverColor: var(--text-accent);
    --dangerColor: var(--error);
    --warningColor: var(--warning);
    --successColor: var(--success);
    --primaryColor: var(--text-accent);
    --iconButtonHoverColor: var(--text-accent);
    --iconButtonHoverLightColor: var(--text-accent);
    --themeDarkColor: var(--bg-tertiary);
    --themeLightColor: var(--text-secondary);
    --themeRed: var(--error);
    --purple: #9b59b6;
    --gray: #95a5a6;
    --darkGray: #7f8c8d;
    --black: #000000;
    --white: #ffffff;
    --lidarrGreen: #1db954;
    --torrentColor: #00853d;
    --usenetColor: #17a2b8;
    --colorImpairedGradient: var(--text-accent);
    --colorImpairedGradientDark: var(--bg-tertiary);
    --defaultColor: var(--text-primary);
}

/* Default Light Theme */
[data-theme="default"][data-mode="light"] {
    /* Base Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-modal: #ffffff;
    --bg-card: #ffffff;
    --bg-hover: #f5f5f5;
    
    /* Text Colors */
    --text-primary: #212529;
    --text-secondary: #495057;
    --text-muted: #6c757d;
    --text-accent: #0066cc;
    --text-inverse: #ffffff;
    
    /* Border Colors */
    --border-primary: #dee2e6;
    --border-secondary: #ced4da;
    --border-focus: #0066cc;
    --border-focus-shadow: rgba(0, 102, 204, 0.1);
    --border-hover: #adb5bd;
    
    /* Button Colors */
    --btn-primary-bg: #0066cc;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #0056b3;
    --btn-secondary-bg: #6c757d;
    --btn-secondary-text: #ffffff;
    --btn-secondary-hover: #5a6268;
    --btn-secondary-darker: #484e53;
    --secondary-shadow: rgba(108, 117, 125, 0.3);
    --btn-danger-bg: #dc3545;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #c82333;
    --btn-danger-darker: #a01e2a;
    --danger-shadow: rgba(220, 53, 69, 0.3);
    
    /* Status Colors */
    --success: #28a745;
    --success-dark: #1e7e34;
    --success-darker: #155724;
    --success-shadow: rgba(40, 167, 69, 0.3);
    --warning: #ffc107;
    --warning-dark: #d39e00;
    --warning-darker: #b08800;
    --warning-shadow: rgba(255, 193, 7, 0.3);
    --error: #dc3545;
    --error-color: #e74c3c;
    --info: #17a2b8;
    --info-dark: #117a8b;
    --info-darker: #0c5460;
    --info-shadow: rgba(23, 162, 184, 0.3);
    
    /* Form Colors */
    --input-bg: #ffffff;
    --input-text: #495057;
    --input-border: #ced4da;
    --input-focus: #0066cc;
    
    /* Sidebar & Navigation */
    --nav-bg: #f8f9fa;
    --nav-text: #495057;
    --nav-hover: #e9ecef;
    --nav-active: #0066cc;
    --sidebar-bg: #ffffff;
    --sidebar-bg-secondary: #f8f9fa;
    --search-bar-bg: #ffffff;
    --top-bar-bg: #f8f9fa;
    
    /* Shadow */
    --shadow: rgba(0, 0, 0, 0.1);
    --shadow-hover: rgba(0, 0, 0, 0.2);
    
    /* Extended Variables for Complete Theme Coverage */
    --pageBackground: var(--bg-primary);
    --textColor: var(--text-primary);
    --borderColor: var(--border-primary);
    --cardBackgroundColor: var(--bg-card);
    --cardShadowColor: var(--shadow);
    --modalBackgroundColor: var(--bg-modal);
    --modalBackdropBackgroundColor: rgba(255, 255, 255, 0.5);
    --modalCloseButtonHoverColor: var(--text-accent);
    --modal-overlay: rgba(0, 0, 0, 0.4);
    --accent-secondary: #0056b3;
    --accent-dark: #004085;
    --accent-shadow: rgba(0, 102, 204, 0.25);
    --popoverBodyBackgroundColor: var(--bg-secondary);
    --popoverTitleBackgroundColor: var(--bg-secondary);
    --popoverTitleBorderColor: var(--border-primary);
    --popoverShadowColor: var(--shadow);
    --popoverShadowInverseColor: var(--shadow-hover);
    --popoverArrowBorderColor: var(--border-primary);
    --popoverArrowBorderInverseColor: var(--border-secondary);
    --tableRowHoverBackgroundColor: var(--bg-hover);
    --inputBackgroundColor: var(--input-bg);
    --inputBorderColor: var(--input-border);
    --inputHoverBackgroundColor: var(--bg-hover);
    --inputFocusBorderColor: var(--input-focus);
    --inputSelectedBackgroundColor: var(--bg-hover);
    --inputReadOnlyBackgroundColor: var(--bg-tertiary);
    --inputBoxShadowColor: rgba(0, 0, 0, 0.075);
    --inputFocusBoxShadowColor: rgba(0, 102, 204, 0.25);
    --inputErrorBorderColor: var(--error);
    --inputErrorBoxShadowColor: rgba(220, 53, 69, 0.25);
    --inputWarningBorderColor: var(--warning);
    --inputWarningBoxShadowColor: rgba(255, 193, 7, 0.25);
    --menuItemColor: var(--text-primary);
    --menuItemHoverColor: var(--text-primary);
    --menuItemHoverBackgroundColor: var(--bg-hover);
    --toolbarMenuItemBackgroundColor: var(--bg-secondary);
    --toolbarMenuItemHoverBackgroundColor: var(--bg-hover);
    --toobarButtonHoverColor: var(--text-accent);
    --albumBackgroundColor: var(--bg-card);
    --artistBackgroundColor: var(--bg-card);
    --trackBackgroundColor: var(--bg-card);
    --calendarBackgroundColor: var(--bg-secondary);
    --calendarBorderColor: var(--border-primary);
    --calendarTodayBackgroundColor: var(--bg-hover);
    --calendarTextDimAlternate: var(--text-muted);
    --scrollbarBackgroundColor: var(--border-secondary);
    --scrollbarHoverBackgroundColor: var(--border-hover);
    --alertDangerBackgroundColor: var(--bg-secondary);
    --alertSuccessBackgroundColor: var(--bg-secondary);
    --alertWarningBackgroundColor: var(--bg-secondary);
    --alertInfoBackgroundColor: var(--bg-secondary);
    --alertWarningColor: var(--warning);
    --pageHeaderBackgroundColor: var(--bg-secondary);
    --toolbarBackgroundColor: var(--bg-secondary);
    --sidebarActiveBackgroundColor: var(--bg-hover);
    --logEventsBackgroundColor: var(--bg-secondary);
    --disabledColor: var(--text-muted);
    --disabledInputColor: var(--text-muted);
    --disabledCheckInputColor: var(--text-muted);
    --helpTextColor: var(--text-muted);
    --advancedFormLabelColor: var(--text-accent);
    --linkHoverColor: var(--text-accent);
    --dangerColor: var(--error);
    --warningColor: var(--warning);
    --successColor: var(--success);
    --primaryColor: var(--text-accent);
    --iconButtonHoverColor: var(--text-accent);
    --iconButtonHoverLightColor: var(--text-accent);
    --themeDarkColor: var(--bg-tertiary);
    --themeLightColor: var(--text-secondary);
    --themeRed: var(--error);
    --purple: #9b59b6;
    --gray: #95a5a6;
    --darkGray: #7f8c8d;
    --black: #000000;
    --white: #ffffff;
    --lidarrGreen: #1db954;
    --torrentColor: #00853d;
    --usenetColor: #17a2b8;
    --colorImpairedGradient: var(--text-accent);
    --colorImpairedGradientDark: var(--bg-tertiary);
    --defaultColor: var(--text-primary);
}

/* ========================================
   NON-DEFAULT THEMES MOVED TO DATABASE
   
   All themes except Default have been moved to the 
   database for dynamic loading and updating.
   
   Available database themes:
   - Cyber (Cyberpunk theme with cyan highlights)
   - VaporWave (Synthwave/Vaporwave aesthetic)
   - TARDIS (Doctor Who TARDIS aesthetic)
   - Punk 77 (Raw punk rock aesthetic with aggressive colors)
   - MTV (Early 80s MTV neon aesthetic with electric colors)
   - LCARS (Star Trek 23rd century interface)
   
   These themes are loaded dynamically via the themes API
   and can be updated without code changes.
======================================== */