/***************************************
 * CSS VARIABLES
 * 
 * This file contains all the CSS variables used throughout the application.
 * These variables allow for consistent styling and easier theme changes.
 * 
 * SECTIONS:
 * 1. Colors
 * 2. Light Theme Variables
 * 3. Dark Theme Variables
 * 4. Shared Variables
 ***************************************/

:root {
    /* Base color palette (for reference) */
    --blue-50: #E3F2FD;
    --blue-100: #BBDEFB;
    --blue-200: #90CAF9;
    --blue-300: #64B5F6;
    --blue-400: #42A5F5;
    --blue-500: #2196F3;
    --blue-600: #1E88E5;
    --blue-700: #1976D2;
    --blue-800: #1565C0;
    --blue-900: #0D47A1;
    
    --red-500: #F44336;
    --green-500: #4CAF50;
    --yellow-500: #FFC107;
    --purple-500: #9C27B0;
    --teal-500: #009688;
    
    /* Gray scale */
    --gray-50: #FAFAFA;
    --gray-100: #F5F5F5;
    --gray-200: #EEEEEE;
    --gray-300: #E0E0E0;
    --gray-400: #BDBDBD;
    --gray-500: #9E9E9E;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;
    
    /* Shared variables (for both light and dark themes) */
    --border-radius: 12px;
    --card-border-radius: 16px;
    --transition-speed: 0.3s;
    --transition-normal: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --processing-color: #0099ff;
    
    /* Premium theme gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%);
    --gradient-warning: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    --gradient-danger: linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%);
    
    /* Primary colors RGB format for opacity manipulation */
    --primary-color-rgb: 33, 150, 243;
    --secondary-color-rgb: 103, 58, 183;
    --success-color-rgb: 76, 175, 80;
    --danger-color-rgb: 244, 67, 54;
    --warning-color-rgb: 255, 193, 7;
    --info-color-rgb: 0, 188, 212;
    --border-color-rgb: 0, 0, 0;
}

/* Light theme variables - Modern Premium Design */
:root, [data-bs-theme="light"] {
    /* Theme colors */
    --primary-color: #3b82f6;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #0891b2;
    
    /* Text colors */
    --text: #1e293b;
    --text-dim: #64748b;
    --text-light: #94a3b8;
    --header-text: #1e293b;
    
    /* Background colors - Modern light theme */
    --background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    --background-rgb: 248, 250, 252;
    --background-transparent-80: rgba(248, 250, 252, 0.8);
    --background-transparent-60: rgba(248, 250, 252, 0.6);
    --background-transparent-40: rgba(248, 250, 252, 0.4);
    --background-transparent-20: rgba(248, 250, 252, 0.2);
    --card: rgba(255, 255, 255, 0.95);
    --card-rgb: 255, 255, 255;
    --card-darker: #f8fafc;
    --card-lighter: rgba(255, 255, 255, 0.98);
    --surface: rgba(255, 255, 255, 0.9);
    --border-color: rgba(148, 163, 184, 0.2);
    --hover: rgba(241, 245, 249, 0.8);
    
    /* Glass-morphism specific for light mode (darker glass effect for visibility) */
    --glass-card: rgba(100, 116, 139, 0.15);
    --glass-border: rgba(100, 116, 139, 0.25);
    --glass-hover: rgba(100, 116, 139, 0.2);
    --input-bg: rgba(255, 255, 255, 0.9);
    --input-border: #e2e8f0;
    --input-focus: #3b82f6;
    
    /* Premium Light Mode Gradients */
    --primary-gradient: linear-gradient(135deg, #60a5fa 0%, #3b82f6 50%, #2563eb 100%);
    --secondary-gradient: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
    --success-gradient: linear-gradient(135deg, #34d399 0%, #10b981 50%, #059669 100%);
    --danger-gradient: linear-gradient(135deg, #f87171 0%, #ef4444 50%, #dc2626 100%);
    --warning-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    --info-gradient: linear-gradient(135deg, #22d3ee 0%, #0891b2 100%);
    --card-gradient: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.95) 100%);
    
    /* Premium Light Mode Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 15px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.12), 0 8px 10px rgba(0, 0, 0, 0.08);
}

/* Dark theme variables */
[data-bs-theme="dark"] {
    /* Theme colors */
    --primary-color: #3b82f6;
    --secondary-color: #64748b;
    --success-color: #10b981;
    --danger-color: #ef4444;
    --error-color: #ef4444;
    --warning-color: #f59e0b;
    --info-color: #0891b2;
    
    /* Text colors */
    --text: #f1f5f9;
    --text-dim: #94a3b8;
    --text-light: #64748b;
    --header-text: white;
    
    /* Background colors */
    --background: #0f172a;
    --background-rgb: 15, 23, 42;
    --background-transparent-80: rgba(15, 23, 42, 0.8);
    --background-transparent-60: rgba(15, 23, 42, 0.6);
    --background-transparent-40: rgba(15, 23, 42, 0.4);
    --background-transparent-20: rgba(15, 23, 42, 0.2);
    --card: #1e293b;
    --card-rgb: 30, 41, 59;
    --card-dark: #0f172a;
    --card-darker: #0f172a;
    --card-lighter: #334155;
    --surface: #1e293b;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-dark: rgba(255, 255, 255, 0.08);
    --border-color-rgb: 255, 255, 255;
    --hover: #334155;
    
    /* Glass-morphism specific for dark mode */
    --glass-card: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-hover: rgba(255, 255, 255, 0.08);
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-focus: #3b82f6;
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, #33ccff 0%, #0099ff 100%);
    --secondary-gradient: linear-gradient(135deg, #ff6633 0%, #ff3300 100%);
    --success-gradient: linear-gradient(135deg, rgba(102, 187, 106, 0.95), rgba(67, 160, 71, 0.9));
    --danger-gradient: linear-gradient(135deg, rgba(239, 83, 80, 0.95), rgba(229, 57, 53, 0.9));
    --warning-gradient: linear-gradient(135deg, rgba(255, 202, 40, 0.95), rgba(255, 179, 0, 0.9));
    --info-gradient: linear-gradient(135deg, rgba(38, 198, 218, 0.95), rgba(0, 172, 193, 0.9));
    --card-gradient-dark: linear-gradient(135deg, rgba(33, 37, 41, 0.98), rgba(33, 37, 41, 0.94));
    
    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.25);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.3), 0 8px 16px rgba(0, 0, 0, 0.25);
}