/* =========================
   TERMINAL-X CSS VARIABLES
   ========================= */
:root {
    /* Brand Colors */
    --primary-color: #4A90E2;
    --primary-dark: #357ABD;
    --primary-light: #667eea;
    --accent-color: #F39C12;
    --accent-hover: #E67E22;
    
    /* Status Colors */
    --success-color: #2ECC71;
    --success-dark: #27AE60;
    --danger-color: #E74C3C;
    --danger-dark: #C0392B;
    --warning-color: #F1C40F;
    --warning-dark: #F39C12;
    --info-color: #3498DB;
    --info-dark: #2980B9;
    
    /* Neutral Colors - Light Theme */
    --dark-bg: #1a1a2e;
    --light-bg: #f8f9fa;
    --white: #ffffff;
    --gray-50: #f8f9fa;
    --gray-100: #e9ecef;
    --gray-200: #dee2e6;
    --gray-300: #ced4da;
    --gray-400: #adb5bd;
    --gray-500: #6c757d;
    --gray-600: #495057;
    --gray-700: #343a40;
    --gray-800: #212529;
    --gray-900: #000000;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-success: linear-gradient(135deg, #2ECC71 0%, #27AE60 100%);
    --gradient-warning: linear-gradient(135deg, #F39C12 0%, #E67E22 100%);
    --gradient-danger: linear-gradient(135deg, #E74C3C 0%, #C0392B 100%);
    --gradient-card: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Card Sizes (Driver License) */
    --card-size-width: 85.6mm;
    --card-size-height: 54mm;
    
    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.2);
    --shadow-xl: 0 16px 48px rgba(0,0,0,0.25);
    --shadow-glow: 0 0 20px rgba(74, 144, 226, 0.3);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 50%;
    
    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    --spacing-3xl: 64px;
    
    /* Typography */
    --font-family-primary: 'Inter', system-ui, -apple-system, sans-serif;
    --font-family-secondary: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    
    /* Layout */
    --header-height: 80px;
    --footer-height: 80px;
    --container-max-width: 1200px;
    
    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;
}

/* Dark Theme Variables */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Theme Colors */
        --dark-bg: #0a0a0a;
        --light-bg: #1a1a1a;
        --white: #2d2d2d;
        --gray-50: #2d2d2d;
        --gray-100: #404040;
        --gray-200: #525252;
        --gray-300: #737373;
        --gray-400: #a3a3a3;
        --gray-500: #d4d4d4;
        --gray-600: #e5e5e5;
        --gray-700: #f5f5f5;
        --gray-800: #fafafa;
        --gray-900: #ffffff;
        
        /* Dark Theme Gradients */
        --gradient-card: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
        --gradient-hero: linear-gradient(135deg, #1a1a2e 0%, #0a0a0a 100%);
        
        /* Dark Theme Shadows */
        --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
        --shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
        --shadow-md: 0 4px 16px rgba(0,0,0,0.5);
        --shadow-lg: 0 8px 32px rgba(0,0,0,0.6);
        --shadow-xl: 0 16px 48px rgba(0,0,0,0.7);
        --shadow-glow: 0 0 20px rgba(74, 144, 226, 0.2);
    }
}