@layer variables, base, components, utilities;

@layer variables {
    :root {

        --transition-micro: 0.1s cubic-bezier(0.34, 1.56, 0.64, 1);
        --transition-fast: 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        --transition-normal: 0.3s cubic-bezier(0.23, 1, 0.32, 1);
        --transition-slow: 0.45s cubic-bezier(0.16, 1, 0.3, 1);
        --transition-spring: 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        --transition-bounce: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        --transition-elastic: 0.8s cubic-bezier(0.25, 0.46, 0.45, 1.94);
        
        --shadow-elevation-low: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        --shadow-elevation-medium: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --shadow-elevation-high: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --shadow-elevation-ultra: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 8px 16px -4px rgba(0, 0, 0, 0.1);
        --shadow-glow: 0 0 20px rgba(107, 115, 255, 0.3), 0 0 40px rgba(107, 115, 255, 0.2);
        --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
        
        --border-radius-sm: 4px;
        --border-radius-md: 8px;
        --border-radius-lg: 12px;
        --border-radius-xl: 16px;
        --border-radius-2xl: 20px;
        --border-radius-3xl: 24px;
        --border-radius-round: 50%;
        
        --gradient-primary: linear-gradient(135deg, #696969 0%, #5a5a5a 25%, #2f4f4f 75%, #1a3333 100%);
        --gradient-primary-reverse: linear-gradient(135deg, #1a3333 0%, #2f4f4f 25%, #5a5a5a 75%, #696969 100%);
        --gradient-primary-simple: linear-gradient(135deg, #696969, #2f4f4f);
        --gradient-primary-simple-reverse: linear-gradient(135deg, #2f4f4f, #696969);
        
        --gradient-accent: linear-gradient(135deg, #4b6cb7 0%, #3a5998 25%, #2d4674 50%, #182848 100%);
        --gradient-accent-reverse: linear-gradient(135deg, #182848 0%, #2d4674 25%, #3a5998 50%, #4b6cb7 100%);
        --gradient-preview: linear-gradient(135deg, #6B73FF 0%, #7B7CFF 25%, #8B85FF 50%, #9A8CDB 100%);
        
        --gradient-glass: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.06) 100%);
        --gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
        --gradient-aurora: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
        
        --gradient-sunrise: linear-gradient(135deg, #ff9a9e 0%, #fecfef 25%, #fecfef 75%, #ffc3a0 100%);
        --gradient-zenith: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 75%, #f5576c 100%);
        --gradient-dawn: linear-gradient(135deg, #a8edea 0%, #fed6e3 25%, #d299c2 75%, #fef9d7 100%);
        --gradient-night: linear-gradient(135deg, #2c3e50 0%, #34495e 25%, #2c5364 75%, #0f3460 100%);
        
        --glass-bg: rgba(255, 255, 255, 0.12);
        --glass-bg-hover: rgba(255, 255, 255, 0.18);
        --glass-bg-active: rgba(255, 255, 255, 0.25);
        --glass-bg-strong: rgba(255, 255, 255, 0.15);
        --glass-bg-strong2:rgba(0, 0, 0, 0.158);
        --glass-border: rgba(255, 255, 255, 0.25);
        --glass-border-hover: rgba(255, 255, 255, 0.35);

        --glass-blur: none;
        --glass-blur-strong: none;
        --glass-blur-subtle: none;
        --backdrop-saturate: none;
        --backdrop-brightness: none;
        
        --color-bg-primary: #ffffff;
        --color-bg-secondary: rgba(255, 255, 255, 0.95);
        --color-bg-card: rgba(255, 255, 255, 0.98);
        --color-bg-overlay: rgba(255, 255, 255, 0.92);
        --color-text-primary: #2c3e50;
        --color-text-secondary: #6b7280;
        --color-text-muted: #9ca3af;
        --color-border: rgba(255, 255, 255, 0.2);
        --color-shadow: rgba(0, 0, 0, 0.1);
        
        --color-brand-primary: #696969;
        --color-brand-secondary: #2f4f4f;
        --color-brand-accent: #4b6cb7;
        --color-brand-light: #87ceeb;
        
        --color-success: #22c55e;
        --color-warning: #f59e0b;
        --color-error: #dc2626;
        --color-info: #3b82f6;
        
        --space-xxs: 0.15rem;
        --space-xs: 0.25rem; 
        --space-sm: 0.5rem;   
        --space-md: 1rem;       
        --space-lg: 1.5rem;  
        --space-xl: 2rem;     
        --space-2xl: 3rem; 
        --space-3xl: 4rem;    
        --space-4xl: 6rem; 
        
        --font-primary: 'Inter', 'Inter-fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        --font-display: 'Playfair Display', 'Playfair-fallback', 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: 2rem;    
        --font-size-4xl: 2.5rem;   

        --line-height-tight: 1.25;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.75;
        
        --navbar-height: 60px;
        --navbar-bg: rgba(255, 255, 255, var(--navbar-scroll-opacity, 0.95));
        --navbar-text: #2d2d2d;
        --navbar-scroll-opacity: 0.92;
        
        --button-padding-sm: 0.5rem 1rem;
        --button-padding-md: 0.75rem 1.5rem;
        --button-padding-lg: 1rem 2rem;
        
        --input-border: 2px solid #e5e7eb;
        --input-border-focus: 2px solid var(--color-brand-accent);
        --input-border-error: 2px solid var(--color-error);
        --input-padding: 0.75rem 1rem;
        
        --card-padding-sm: 1.5rem;
        --card-padding-md: 2rem;
        --card-padding-lg: 3rem;
        
        --z-dropdown: 100;
        --z-sticky: 200;
        --z-fixed: 300;
        --z-modal-backdrop: 400;
        --z-modal: 500;
        --z-popover: 600;
        --z-tooltip: 700;
        --z-toast: 800;
        --z-loading: 9999;
        --z-debug: 10000;
    }
    
    @media (prefers-reduced-motion: reduce) {
        :root {
            --transition-micro: 0.01ms;
            --transition-fast: 0.01ms;
            --transition-normal: 0.01ms;
            --transition-slow: 0.01ms;
            --transition-spring: 0.01ms;
            --transition-bounce: 0.01ms;
            --transition-elastic: 0.01ms;
            --trasition-box-normal: 0.5s;
        }
    }
    
    @media (prefers-contrast: high) {
        :root {
            --color-text-primary: #000000;
            --color-text-secondary: #333333;
            --color-border: #000000;
            --shadow-elevation-low: 0 2px 4px 0 rgba(0, 0, 0, 0.3);
            --shadow-elevation-medium: 0 4px 8px 0 rgba(0, 0, 0, 0.3);
            --shadow-elevation-high: 0 8px 16px 0 rgba(0, 0, 0, 0.3);
        }
        
    }
}

.bg-aurora {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #f5576c 75%, #4facfe 100%);
    background-size: 400% 400%;
    animation: auroraFlow 20s ease infinite;
}

@keyframes auroraFlow {
    0%, 100% { background-position: 0% 50%; }
    25% { background-position: 100% 25%; }
    50% { background-position: 50% 100%; }
    75% { background-position: 25% 0%; }
}