/***************************************
 * 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;
    
    /* 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 */
:root, [data-bs-theme="light"] {
    /* Theme colors */
    --primary-color: rgba(33, 150, 243, 1);
    --secondary-color: rgba(103, 58, 183, 1);
    --success-color: rgba(76, 175, 80, 1);
    --danger-color: rgba(244, 67, 54, 1);
    --error-color: rgba(244, 67, 54, 1);
    --warning-color: rgba(255, 193, 7, 1);
    --info-color: rgba(0, 188, 212, 1);
    
    /* Text colors */
    --text: #212121;
    --text-dim: #616161;
    --text-light: #9E9E9E;
    --header-text: white;
    
    /* Background colors */
    --background: #f5f5f5;
    --background-rgb: 245, 245, 245;
    --background-transparent-80: rgba(245, 245, 245, 0.8);
    --background-transparent-60: rgba(245, 245, 245, 0.6);
    --background-transparent-40: rgba(245, 245, 245, 0.4);
    --background-transparent-20: rgba(245, 245, 245, 0.2);
    --card: white;
    --card-rgb: 255, 255, 255;
    --card-darker: #f0f0f0;
    --card-lighter: #ffffff;
    --border-color: rgba(0, 0, 0, 0.1);
    --hover: #f0f0f0;
    --input-bg: #ffffff;
    --input-border: #e0e0e0;
    --input-focus: #33ccff;
    
    /* 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(76, 175, 80, 0.95), rgba(56, 142, 60, 0.9));
    --danger-gradient: linear-gradient(135deg, rgba(244, 67, 54, 0.95), rgba(211, 47, 47, 0.9));
    --warning-gradient: linear-gradient(135deg, rgba(255, 193, 7, 0.95), rgba(255, 160, 0, 0.9));
    --info-gradient: linear-gradient(135deg, rgba(0, 188, 212, 0.95), rgba(0, 151, 167, 0.9));
    --card-gradient: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.94));
    
    /* Shadows */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.08);
}

/* Dark theme variables */
[data-bs-theme="dark"] {
    /* Theme colors */
    --primary-color: rgba(66, 165, 245, 1);
    --secondary-color: rgba(149, 117, 205, 1);
    --success-color: rgba(102, 187, 106, 1);
    --danger-color: rgba(239, 83, 80, 1);
    --error-color: rgba(239, 83, 80, 1);
    --warning-color: rgba(255, 202, 40, 1);
    --info-color: rgba(38, 198, 218, 1);
    
    /* Text colors */
    --text: #E0E0E0;
    --text-dim: #BDBDBD;
    --text-light: #9E9E9E;
    --header-text: white;
    
    /* Background colors */
    --background: #1a1a2e;
    --background-rgb: 26, 26, 46;
    --background-transparent-80: rgba(26, 26, 46, 0.8);
    --background-transparent-60: rgba(26, 26, 46, 0.6);
    --background-transparent-40: rgba(26, 26, 46, 0.4);
    --background-transparent-20: rgba(26, 26, 46, 0.2);
    --card: #2a2a4a;
    --card-rgb: 42, 42, 74;
    --card-dark: #1a1a2e;
    --card-darker: #1a1a2e;
    --card-lighter: #3a3a5a;
    --border-color: rgba(255, 255, 255, 0.1);
    --border-color-dark: rgba(255, 255, 255, 0.08);
    --border-color-rgb: 255, 255, 255;
    --hover: #3a3a5a;
    --input-bg: #2a2a4a;
    --input-border: #3a3a5a;
    --input-focus: #33ccff;
    
    /* 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);
}