/* CSS Variables and Root Configuration - CYBERPUNK PALETTE */
:root {
    /* Primary Cyberpunk Color Palette */
    --primary-color: #0271FC;
    --secondary-color: #00f2fe;
    --accent-color: #4facfe;
    --dark-bg: #050507;
    --panel-bg: rgba(20, 20, 25, 0.6);

    /* Legacy gradient support */
    --primary-gradient: linear-gradient(135deg, #0271FC 0%, #00f2fe 100%);
    --secondary-gradient: linear-gradient(135deg, #0271FC 0%, #4facfe 100%);
    --accent-gradient: linear-gradient(135deg, #0271FC 0%, #00BFFF 100%);
    --tertiary-gradient: linear-gradient(135deg, #0256D6 0%, #1E3A8A 100%);

    /* Neutral Colors */
    --dark-secondary: #1a1a1b;
    --dark-tertiary: #2a2a2b;
    --light-bg: #ffffff;
    --light-secondary: #f8f9fa;
    --light-tertiary: #e9ecef;

    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --text-accent: #0271FC;

    /* Cyberpunk Effects */
    --neon-glow: 0 0 10px rgba(2, 113, 252, 0.5);
    
    /* Spacing */
    --section-padding: 80px 0;
    --container-padding: 0 20px;
    --border-radius: 12px;
    --border-radius-large: 24px;
    
    /* Typography */
    --font-main: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-heading: 'Montserrat', sans-serif;
    --font-display: 'Montserrat', sans-serif;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 8px rgba(0,0,0,0.15);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
    --shadow-neon: 0 0 20px rgba(2, 113, 252, 0.4);
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-smooth: 0.3s ease;
    --transition-slow: 0.5s ease;
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
}

/* Klingon Red Theme Override */
.klingon-theme {
    /* Klingon Red Color Palette */
    --primary-color: #CC0000;
    --secondary-color: #FF4444;
    --accent-color: #8B0000;
    --text-accent: #CC0000;

    /* Klingon Red Gradients */
    --primary-gradient: linear-gradient(135deg, #CC0000 0%, #FF4444 100%);
    --secondary-gradient: linear-gradient(135deg, #CC0000 0%, #8B0000 100%);
    --accent-gradient: linear-gradient(135deg, #CC0000 0%, #B22222 100%);
    --tertiary-gradient: linear-gradient(135deg, #8B0000 0%, #660000 100%);

    /* Klingon Red Effects */
    --neon-glow: 0 0 10px rgba(204, 0, 0, 0.5);
    --shadow-neon: 0 0 20px rgba(204, 0, 0, 0.4);

    /* Klingon Tech Font - Electrolize */
    --font-main: 'Electrolize', monospace;
    --font-primary: 'Electrolize', monospace;
    --font-heading: 'Electrolize', monospace;
    --font-display: 'Electrolize', monospace;
}