/* CSS Variables - Theme and Design System */
/* Centralized variable definitions for consistent theming across all components */

:root {
    /* Light Theme - Light Blueish Purple & Light Orange Accents */
    --primary-color: #8B7EF7;  /* Light blueish purple */
    --primary-dark: #6366F1;
    --primary-light: #C4B5FD;
    --secondary-color: #FB923C;  /* Light orange */
    --secondary-dark: #EA580C;
    --secondary-light: #FED7AA;
    --accent: #10B981;
    --accent-light: #6EE7B7;
    --accent-mint: #53eeae;  /* New mint green hover/special color */
    --accent-mint-light: rgba(83, 238, 174, 0.2);
    --accent-mint-dark: #2dd688;
    
    /* Light Theme Backgrounds */
    --background-primary: #FFFFFF;
    --background-secondary: #FAFAFC;  /* Slightly tinted with purple */
    --background-tertiary: #F3F4FF;   /* Light purple tint */
    --background-accent: rgba(139, 126, 247, 0.05);
    --background-overlay: rgba(0, 0, 0, 0.5);
    --background-card: rgba(255, 255, 255, 0.95);
    --background-glass: rgba(139, 126, 247, 0.05);
    
    /* Light Theme Text Colors */
    --text-primary: #1E293B;
    --text-secondary: #64748B;
    --text-tertiary: #94A3B8;
    --text-inverse: #FFFFFF;
    --text-accent: #8B7EF7;    /* Light blueish purple */
    --text-orange: #FB923C;    /* Light orange */
    
    /* Light Theme Borders and Shadows */
    --border-primary: #E2E8F0;
    --border-secondary: #CBD5E1;
    --border-accent: rgba(139, 126, 247, 0.2);
    --shadow-sm: 0 1px 2px 0 rgba(139, 126, 247, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(139, 126, 247, 0.1), 0 2px 4px -1px rgba(139, 126, 247, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(139, 126, 247, 0.1), 0 4px 6px -2px rgba(139, 126, 247, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(139, 126, 247, 0.1), 0 10px 10px -5px rgba(139, 126, 247, 0.04);
    
    /* Transitions */
    --transition: all 0.3s ease;
    --transition-fast: all 0.2s ease;
    --transition-slow: all 0.5s ease;
    
    /* Theme Transitions */
    --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    
    /* Layout Dimensions */
    --nav-height: 85px; /* Unified navigation height for all devices */
    --nav-height-desktop: 85px; /* Legacy support */
    --nav-height-mobile: 85px; /* Legacy support */
    --hero-height: 700px; /* Main hero height for desktop - increased by 100px */
    --hero-height-mobile: calc(100vh - var(--nav-height)); /* Full viewport minus nav height */
    --hero-height-mobile-fallback: calc(100vh - var(--nav-height)); /* Consistent fallback */
    --container-max-width: 1200px;
    --container-padding: 20px;
    
    /* Enhanced Glassmorphism Navigation Colors - Light Theme */
    --nav-bg: rgba(255, 255, 255, 0.75);
    --nav-bg-hover: rgba(255, 255, 255, 0.85);
    --nav-border: rgba(255, 255, 255, 0.25);
    --nav-border-hover: rgba(255, 255, 255, 0.4);
    --nav-shadow: 0 12px 40px rgba(0, 0, 0, 0.08), 0 4px 16px rgba(255, 255, 255, 0.1);
    --nav-shadow-hover: 0 16px 56px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(255, 255, 255, 0.15);
    
    /* Navigation Button Colors - Light Theme */
    --nav-btn-bg: rgba(139, 126, 247, 0.1);
    --nav-btn-bg-hover: rgba(139, 126, 247, 0.2);
    --nav-btn-bg-active: rgba(139, 126, 247, 0.3);
    --nav-btn-text: rgba(30, 41, 59, 0.9);
    --nav-btn-text-active: rgba(30, 41, 59, 1);
    --nav-btn-border: rgba(139, 126, 247, 0.2);
    --nav-btn-border-active: rgba(139, 126, 247, 0.5);
    
    /* Control Button Colors - Light Theme */
    --control-bg: linear-gradient(135deg, #8B7EF7 0%, #7C6AED 50%, #6366F1 100%);
    --control-bg-hover: linear-gradient(135deg, #A78BFA 0%, #8B7EF7 50%, #7C6AED 100%);
    --control-shadow: 0 4px 16px rgba(139, 126, 247, 0.3);
    --control-shadow-hover: 0 6px 24px rgba(139, 126, 247, 0.4);
    
    /* Enhanced Glassmorphism Sidebar - Light Theme */
    --sidebar-glass-bg: rgba(255, 255, 255, 0.85);
    --sidebar-glass-border: rgba(139, 126, 247, 0.15);
    --sidebar-glass-shadow: 0 25px 45px rgba(139, 126, 247, 0.2), 0 10px 20px rgba(139, 126, 247, 0.15);
    --sidebar-glass-blur: blur(20px);
    --sidebar-glass-saturate: saturate(1.2);
    --sidebar-item-glass-bg: rgba(139, 126, 247, 0.08);
    --sidebar-item-glass-hover: rgba(139, 126, 247, 0.15);
    --sidebar-item-glass-active: rgba(139, 126, 247, 0.25);
    --sidebar-item-glass-border: rgba(139, 126, 247, 0.1);
    --sidebar-item-glass-border-hover: rgba(139, 126, 247, 0.4);
    
    /* Z-Index Layers */
    --z-header: 2000; /* Increased to appear above full-viewport heroes */
    --z-sidebar: 2001;
    --z-overlay: 500; /* For loading overlays */
    --z-controls: 100;
    --z-dropdown: 50;
    --z-content: 1;
    --z-hero: 10; /* Hero sections below navigation */
    
    /* Border Radius */
    --radius-small: 8px;
    --radius-medium: 12px;
    --radius-large: 16px;
    --radius-xl: 24px;
    --radius-full: 50%;
    --border-radius: 8px;
    --border-radius-lg: 16px;
    
    /* Form and Component Variables */
    --card-bg: rgba(255, 255, 255, 0.95);
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --border-color: rgba(29, 143, 96, 0.2);
    --accent-color: #20b66c;
    --success-color: #28a745;
    --error-color: #dc3545;
    --primary-rgb: 29, 143, 96;
    --success-rgb: 40, 167, 69;
    --error-rgb: 220, 53, 69;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1);
    
    /* Transitions */
    --transition-base: all 0.3s ease;
    --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Light Theme Variables (default) */
    --text-color: #2c3e50;
    --text-primary: #2c3e50;
    --text-muted: #6c757d;
    --card-bg-focused: #ffffff;
}

/* Light Mode Only - No Dark Theme Support */