/* CSS Variables */
:root {
    /* Colors - Dark Cyberpunk Theme */
    --background: hsl(220, 15%, 8%);
    --foreground: hsl(210, 40%, 98%);
    
    --card: hsl(220, 15%, 12%);
    --card-foreground: hsl(210, 40%, 98%);
    
    --muted: hsl(220, 15%, 14%);
    --muted-foreground: hsl(215, 20.2%, 65.1%);
    
    --border: hsl(220, 15%, 20%);
    
    /* Neon Colors (softened for better readability) */
    --neon-blue: hsl(195, 85%, 56%);
    --neon-cyan: hsl(182, 72%, 55%);
    --neon-pink: hsl(330, 72%, 64%);
    --neon-purple: hsl(270, 68%, 65%);
    --neon-green: hsl(130, 68%, 52%);
    --neon-yellow: hsl(48, 80%, 58%);
    
    /* Cyber Environment */
    --cyber-dark: hsl(220, 15%, 6%);
    --cyber-darker: hsl(220, 15%, 4%);
    --cyber-grid: hsla(195, 100%, 30%, 0.1);
    
    /* Gold */
    --gold: hsl(45, 100%, 60%);
    --gold-light: hsl(45, 100%, 70%);
    --gold-dark: hsl(45, 100%, 50%);
    
    /* Spacing */
    --container-padding: 1rem;
    --section-padding: 6rem 0;
    --grid-gap: 1.5rem;
    
    /* Border Radius */
    --radius: 0.75rem;
    --radius-small: 0.375rem;
    --radius-large: 1rem;
    
    /* Typography */
    --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;
    --font-size-5xl: 3rem;
    --font-size-6xl: 3.75rem;
    --font-size-7xl: 4.5rem;
    --font-size-8xl: 6rem;
    
    /* Z-Index */
    --z-navigation: 1000;
    --z-back-to-top: 1001;
    --z-customer-service: 1002;
    --z-cookie-consent: 1003;
    
    /* Primary Colors */
    --primary: hsl(195, 85%, 42%);
    --primary-dark: hsl(195, 85%, 32%);
    --primary-light: hsl(195, 85%, 52%);
    
    /* Accent Colors */
    --accent: hsl(48, 80%, 58%);
    --accent-dark: hsl(48, 80%, 48%);
    --accent-light: hsl(48, 80%, 68%);
    
    /* Nintendo Style Colors */
    --nintendo-red: #E60012;
    --nintendo-blue: #0066CC;
    --nintendo-yellow: #FFCC00;
    --nintendo-green: #00AA44;
    --nintendo-orange: #FF6600;
    --nintendo-purple: #8833CC;
    --nintendo-pink: #FF6699;
    --nintendo-cyan: #00CCFF;
    --nintendo-white: #FFFFFF;
    --nintendo-black: #1A1A1A;
    --nintendo-gray: #666666;
    --nintendo-light-gray: #CCCCCC;
    
    /* Nintendo UI Colors */
    --nintendo-ui-bg: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
    --nintendo-ui-border: #2C5F8A;
    --nintendo-ui-shadow: rgba(0, 0, 0, 0.3);
    --nintendo-ui-highlight: rgba(255, 255, 255, 0.3);
    
    /* Max Width */
    --max-width: 1200px;
    
    /* Component Heights */
    --cookie-height: 5.5rem;
    --cookie-height-tablet: 8rem;
    --cookie-height-mobile: 10rem;
    
    /* Animation Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* Box Shadows (reduced intensity) */
    --shadow-neon-blue: 0 0 6px var(--neon-blue), 0 0 12px var(--neon-blue);
    --shadow-neon-pink: 0 0 6px var(--neon-pink), 0 0 12px var(--neon-pink);
    --shadow-neon-green: 0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
    --shadow-neon-cyan: 0 0 6px var(--neon-cyan), 0 0 12px var(--neon-cyan);
}

/* Media Query Variables for JavaScript */
@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --section-padding: 4rem 0;
        --grid-gap: 1rem;
    }
}

@media (max-width: 480px) {
    :root {
        --container-padding: 0.75rem;
        --section-padding: 3rem 0;
        --grid-gap: 0.75rem;
    }
}