/* ============================================
   Modern Dark Theme - Premium Design System
   Clean, Professional, Modern UI
   ============================================ */

:root {
    /* ===== Modern Background Colors ===== */
    --bg-primary: #0f0f1a;
    --bg-secondary: #1a1a2e;
    --bg-tertiary: #252540;
    --bg-hover: #2d2d4a;
    --bg-overlay: rgba(0, 0, 0, 0.7);
    --bg-card: rgba(26, 26, 46, 0.6);
    --bg-card-hover: rgba(37, 37, 64, 0.8);
    
    /* ===== Modern Orange Accent Colors ===== */
    --orange-primary: #ff6b35;
    --orange-secondary: #ff8c42;
    --orange-light: #ffa366;
    --orange-dark: #e55a2b;
    --orange-glow: rgba(255, 107, 53, 0.4);
    
    /* Orange RGBA Variants */
    --orange-rgba-05: rgba(255, 107, 53, 0.05);
    --orange-rgba-10: rgba(255, 107, 53, 0.1);
    --orange-rgba-15: rgba(255, 107, 53, 0.15);
    --orange-rgba-20: rgba(255, 107, 53, 0.2);
    --orange-rgba-30: rgba(255, 107, 53, 0.3);
    
    /* ===== Modern Text Colors ===== */
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1aa;
    --text-muted: #71717a;
    --text-white: #ffffff;
    --text-inverse: #0f0f1a;
    
    /* ===== Status Colors ===== */
    --success: #10b981;
    --success-light: rgba(16, 185, 129, 0.1);
    --warning: #f59e0b;
    --warning-light: rgba(245, 158, 11, 0.1);
    --danger: #ef4444;
    --danger-light: rgba(239, 68, 68, 0.1);
    --info: #3b82f6;
    --info-light: rgba(59, 130, 246, 0.1);
    
    /* ===== Modern Border Colors ===== */
    --border-primary: rgba(255, 255, 255, 0.06);
    --border-secondary: rgba(255, 255, 255, 0.1);
    --border-hover: rgba(255, 255, 255, 0.15);
    --border-active: rgba(255, 107, 53, 0.3);
    --border-accent: var(--orange-primary);
    
    /* ===== Premium Shadows ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 24px var(--orange-rgba-30);
    --shadow-orange: 0 4px 16px var(--orange-rgba-20);
    
    /* ===== Modern Gradients ===== */
    --gradient-primary: linear-gradient(135deg, var(--orange-primary) 0%, var(--orange-secondary) 100%);
    --gradient-bg: linear-gradient(135deg, rgba(26, 26, 46, 0.8) 0%, rgba(37, 37, 64, 0.6) 100%);
    --gradient-card: linear-gradient(135deg, rgba(26, 26, 46, 0.6) 0%, rgba(37, 37, 64, 0.4) 100%);
    --gradient-shimmer: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.03), transparent);
    
    /* ===== Typography ===== */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: "SF Mono", "Monaco", "Consolas", monospace;
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* ===== Modern Spacing Scale ===== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 3rem;     /* 48px */
    --spacing-3xl: 4rem;     /* 64px */
    
    /* ===== Smooth Transitions ===== */
    --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 350ms cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== Modern Border Radius ===== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 18px;
    --radius-full: 9999px;
    
    /* ===== Z-Index Layers ===== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal: 400;
    --z-tooltip: 500;
    --z-toast: 600;
    
    /* ===== Mobile Variables ===== */
    --mobile-header-height: 64px;
    --mobile-sidebar-width: 280px;
    --mobile-touch-target: 44px;
    
    /* ===== App Spacing ===== */
    --app-padding: clamp(1rem, 4vw, 1.5rem);
    --app-padding-sm: clamp(0.75rem, 3vw, 1rem);
    --app-padding-lg: clamp(1.5rem, 5vw, 2rem);
    --app-gap: clamp(0.75rem, 3vw, 1rem);
    --app-gap-sm: clamp(0.5rem, 2vw, 0.75rem);
    --app-gap-lg: clamp(1rem, 4vw, 1.5rem);
    
    /* ===== Typography Scale ===== */
    --font-size-xs: clamp(0.75rem, 2vw, 0.875rem);
    --font-size-sm: clamp(0.875rem, 2.5vw, 1rem);
    --font-size-base: clamp(1rem, 3vw, 1.125rem);
    --font-size-lg: clamp(1.125rem, 3.5vw, 1.25rem);
    --font-size-xl: clamp(1.25rem, 4vw, 1.5rem);
    --font-size-2xl: clamp(1.5rem, 5vw, 2rem);
    --font-size-3xl: clamp(2rem, 7vw, 3rem);
    
    /* ===== Touch Targets ===== */
    --touch-target-min: 44px;
    --touch-target-comfortable: 48px;
    
    /* ===== Container Max Widths ===== */
    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1140px;
    --container-2xl: 1320px;
    
    /* ===== Grid Gaps ===== */
    --grid-gap-xs: clamp(0.5rem, 2vw, 0.75rem);
    --grid-gap-sm: clamp(0.75rem, 3vw, 1rem);
    --grid-gap-md: clamp(1rem, 4vw, 1.5rem);
    --grid-gap-lg: clamp(1.5rem, 5vw, 2rem);
    
    /* ===== Mobile Web App Variables ===== */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    
    /* ===== Touch Targets (Mobile App Standards) ===== */
    --touch-target-min: 44px; /* iOS/Android minimum */
    --touch-target-comfortable: 48px; /* Comfortable size */
    --touch-target-large: 56px; /* Large targets for important actions */
    
    /* ===== Mobile App Spacing ===== */
    --app-header-height: 56px;
    --app-header-height-mobile: 50px;
    --app-bottom-bar-height: 60px;
    
    /* ===== Mobile App Z-Index Layers ===== */
    --z-app-header: 1000;
    --z-app-bottom-bar: 1000;
    --z-app-overlay: 2000;
    --z-app-modal: 3000;
    --z-app-toast: 4000;
    
    /* ===== Mobile Performance ===== */
    --will-change-transform: will-change;
    --will-change-scroll: will-change;
    --gpu-accelerated: translateZ(0);
}