/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

:root {
    /* Dark theme (default) */
    --primary-bg: #000205;
    --primary-text: #fff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-hover: rgba(255, 255, 255, 0.06);
    --border-color: rgba(255, 255, 255, 0.025);
    --nav-height: 90px;
    --transition-smooth: all 0.6s cubic-bezier(0.16, 1, 0.6, 1);
    --transition-smooth-smoother: all 1.2s cubic-bezier(0.36, 1, 0.6, 1);
    --text-gradient: linear-gradient(135deg, #fff 0%, rgba(255, 255, 255, 0.85) 100%);
    
    /* Enhanced glassmorphism variables */
    --glass-bg: rgba(255, 255, 255, 0.04);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    --glass-hover-bg: rgba(255, 255, 255, 0.08);
    --glass-hover-border: rgba(255, 255, 255, 0.15);
    --glass-hover-shadow: 0 12px 48px rgba(0, 0, 0, 0.2);
    
    /* Refined light theme values */
    --light-primary: #000205;
    --light-secondary: rgba(0, 0, 0, 0.75);
    --light-tertiary: rgba(0, 0, 0, 0.5);
    --light-bg: #ffffff;
    --light-card-bg: rgba(255, 255, 255, 0.85);
    --light-border: rgba(0, 0, 0, 0.1);
    --light-hover: rgba(0, 0, 0, 0.03);
    --light-shadow: rgba(0, 0, 0, 0.04);
    --light-shadow-hover: rgba(0, 0, 0, 0.08);
    
    /* Enhanced light mode glassmorphism */
    --light-glass-bg: rgba(255, 255, 255, 0.75);
    --light-glass-border: rgba(0, 0, 0, 0.08);
    --light-glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    --light-glass-hover-bg: rgba(255, 255, 255, 0.9);
    --light-glass-hover-border: rgba(0, 0, 0, 0.12);
    --light-glass-hover-shadow: 0 16px 64px rgba(0, 0, 0, 0.15);
    
    /* Light mode accent colors */
    --light-accent-primary: #4A90E2;
    --light-accent-secondary: #7ED321;
    --light-accent-gradient: linear-gradient(135deg, #4A90E2 0%, #7ED321 100%);
    
    /* New light mode specific gradients */
    --light-gradient-primary: linear-gradient(135deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.9) 100%);
    --light-gradient-hover: linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.02) 100%);
    --light-card-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    --light-card-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.1);
    
    /* Animation variables */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out-quart: cubic-bezier(0.76, 0, 0.24, 1);
    --ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* Enhanced iOS/macOS compatibility */
    --webkit-backdrop-filter: blur(20px);
    --backdrop-filter: blur(20px);
    
    --fluid-min-width: 320;
    --fluid-max-width: 1920;
    --fluid-min-size: 14;
    --fluid-max-size: 18;
    --fluid-min-scale: 1.2;
    --fluid-max-scale: 1.333;
    --fluid-screen: 100vw;
    --fluid-bp: calc(
        (var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) /
        (var(--fluid-max-width) - var(--fluid-min-width))
    );
}