/* =========================
   TERMINAL-X CSS VARIABLES
   iPhone + Cyberpunk Metallic Theme
   ========================= */
:root {
    /* Brand Colors - iPhone + Cyberpunk */
    --primary-color: #667eea;
    --primary-dark: #764ba2;
    --primary-light: #8b9dc3;
    --accent-color: #00d4ff;
    --accent-hover: #ff00ff;
    
    /* Cyberpunk Colors */
    --cyber-primary: #00d4ff;
    --cyber-secondary: #ff00ff;
    --cyber-accent: #00ff88;
    --metallic-primary: #c0c0c0;
    --metallic-secondary: #4a5568;
    --steel-primary: #2c3e50;
    --steel-secondary: #34495e;
    
    /* Status Colors */
    --success-color: #2ecc71;
    --success-dark: #27ae60;
    --danger-color: #e74c3c;
    --danger-dark: #c0392b;
    --warning-color: #f39c12;
    --warning-dark: #e67e22;
    --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;
    
    /* iOS + Cyberpunk 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, rgba(255, 255, 255, 0.95), rgba(248, 249, 250, 0.95));
    --gradient-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-cyber: linear-gradient(135deg, #00d4ff 0%, #ff00ff 100%);
    --gradient-metallic: linear-gradient(135deg, #c0c0c0 0%, #4a5568 100%);
    --gradient-steel: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
    
    /* Card Sizes (Driver License) */
    --card-size-width: 85.6mm;
    --card-size-height: 54mm;
    
    /* iOS + Cyberpunk 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 20px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 30px rgba(0,0,0,0.2);
    --shadow-xl: 0 20px 60px rgba(0,0,0,0.3);
    --shadow-2xl: 0 40px 80px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.3);
    --shadow-cyber: 0 0 30px rgba(0, 212, 255, 0.4);
    --shadow-neon: 0 0 30px rgba(255, 0, 255, 0.4);
    --shadow-metallic: 0 4px 20px rgba(192, 192, 192, 0.2);
    --shadow-steel: 0 8px 30px rgba(44, 62, 80, 0.3);
    
    /* iOS + Cyberpunk Transitions */
    --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-normal: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-slow: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --transition-ios: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    
    /* iOS Border Radius */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-3xl: 32px;
    --radius-full: 50%;
    
    /* iOS 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 - iPhone + Cyberpunk */
@media (prefers-color-scheme: dark) {
    :root {
        /* Dark Theme Colors - Cyberpunk Style */
        --dark-bg: #0a0a0a;
        --light-bg: #1a1a2e;
        --white: #e8eaf6;
        --gray-50: #1a1a2e;
        --gray-100: #262647;
        --gray-200: #323262;
        --gray-300: #4a4a7a;
        --gray-400: #b8bcc8;
        --gray-500: #d4d8e0;
        --gray-600: #e0e4ec;
        --gray-700: #ecf0f8;
        --gray-800: #f8fafc;
        --gray-900: #ffffff;
        
        /* Dark Theme Gradients */
        --gradient-card: linear-gradient(135deg, rgba(0, 0, 0, 0.8), rgba(26, 26, 46, 0.8));
        --gradient-hero: linear-gradient(135deg, #1a1a2e, #0a0a0a);
        --gradient-cyber: linear-gradient(135deg, rgba(0, 212, 255, 0.3), rgba(255, 0, 255, 0.3));
        --gradient-steel: linear-gradient(135deg, #2c3e50, #34495e);
        
        /* Dark Theme Shadows - Enhanced */
        --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 20px rgba(0,0,0,0.5);
        --shadow-lg: 0 8px 30px rgba(0,0,0,0.6);
        --shadow-xl: 0 20px 60px rgba(0,0,0,0.7);
        --shadow-2xl: 0 40px 80px rgba(0,0,0,0.8);
        --shadow-glow: 0 0 20px rgba(102, 126, 234, 0.4);
        --shadow-cyber: 0 0 30px rgba(0, 212, 255, 0.5);
        --shadow-neon: 0 0 30px rgba(255, 0, 255, 0.5);
        --shadow-metallic: 0 4px 20px rgba(192, 192, 192, 0.3);
        --shadow-steel: 0 8px 30px rgba(44, 62, 80, 0.4);
    }
}