/* 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 */
    --neon-blue: hsl(195, 100%, 50%);
    --neon-cyan: hsl(180, 100%, 60%);
    --neon-pink: hsl(330, 100%, 70%);
    --neon-purple: hsl(270, 100%, 70%);
    --neon-green: hsl(120, 100%, 60%);
    --neon-yellow: hsl(50, 100%, 60%);
    
    /* 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-customer-service: 1001;
    --z-cookie-consent: 1002;
    --z-back-to-top: 1003;
    
    /* Animation Durations */
    --duration-fast: 150ms;
    --duration-normal: 300ms;
    --duration-slow: 500ms;
    
    /* Box Shadows */
    --shadow-neon-blue: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue), 0 0 30px var(--neon-blue);
    --shadow-neon-pink: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink), 0 0 30px var(--neon-pink);
    --shadow-neon-green: 0 0 10px var(--neon-green), 0 0 20px var(--neon-green), 0 0 30px var(--neon-green);
    --shadow-neon-cyan: 0 0 10px var(--neon-cyan), 0 0 20px var(--neon-cyan), 0 0 30px 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;
    }
}