/* Professional Modern Theme - CSS Variables */
:root {
    /* Primary Colors */
    --primary-color: #00d4ff;
    --primary-dark: #0099cc;
    --primary-light: #33dcff;
    --primary-rgba: 0, 212, 255;
    
    /* Secondary Colors */
    --secondary-color: #1a1a2e;
    --secondary-light: #16213e;
    --secondary-dark: #0f0f23;
    
    /* Accent Colors */
    --accent-color: #ff6b35;
    --accent-light: #ff8555;
    --accent-rgba: 255, 107, 53;
    
    /* Status Colors */
    --success-color: #00ff88;
    --success-rgba: 0, 255, 136;
    --warning-color: #ffaa00;
    --warning-rgba: 255, 170, 0;
    --danger-color: #ff4757;
    --danger-rgba: 255, 71, 87;
    --info-color: #00d4ff;
    --info-rgba: 0, 212, 255;
    
    /* Background Colors */
    --background-color: #0f0f23;
    --background-light: #16213e;
    --background-card: rgba(26, 26, 46, 0.8);
    --background-overlay: rgba(0, 0, 0, 0.8);
    
    /* Text Colors */
    --text-color: #ffffff;
    --text-muted: #a0a0a0;
    --text-light: #e0e0e0;
    --text-dark: #606060;
    
    /* Layout Variables */
    --sidebar-width: 260px;
    --header-height: 65px;
    --content-padding: 30px;
    
    /* Border & Radius */
    --border-radius: 12px;
    --border-radius-lg: 16px;
    --border-radius-sm: 8px;
    --border-color: rgba(0, 212, 255, 0.2);
    --border-color-light: rgba(0, 212, 255, 0.1);
    
    /* Shadows */
    --box-shadow: 0 8px 32px rgba(0, 212, 255, 0.1);
    --box-shadow-hover: 0 12px 40px rgba(0, 212, 255, 0.2);
    --box-shadow-focus: 0 0 20px rgba(0, 212, 255, 0.3);
    --text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    
    /* Transitions */
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    
    /* Z-Index Layers */
    --z-modal: 2000;
    --z-overlay: 1500;
    --z-sidebar: 1000;
    --z-header: 999;
    --z-dropdown: 900;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
    --font-size-3xl: 1.875rem;
    --font-size-4xl: 2.25rem;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    
    /* Animation Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-color) 0%, #f39c12 100%);
    --gradient-success: linear-gradient(135deg, var(--success-color) 0%, #00cc70 100%);
    --gradient-warning: linear-gradient(135deg, var(--warning-color) 0%, #e69900 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger-color) 0%, #e63946 100%);
    --gradient-background: linear-gradient(135deg, var(--background-color) 0%, var(--background-light) 100%);
    
    /* Backdrop Effects */
    --backdrop-blur: blur(20px);
    --backdrop-saturate: saturate(180%);
}