/* =========================================
   NEON THEME - CSS VARIABLES
   Cyberpunk/HUD Design System
   ========================================= */

:root {
    /* TYPOGRAPHY */
    --font-head: 'Orbitron', sans-serif;
    --font-body: 'Rajdhani', sans-serif;

    /* SPACING */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;

    /* SIZING */
    --container-max: 1400px;
    --header-height: 120px;
    --clip-angle: 12px;
    --border-radius: 4px;

    /* TRANSITIONS */
    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;

    /* Z-INDEX LAYERS */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-modal: 1000;
    --z-toast: 1100;

    /* LIGHT THEME (Default) */
    --bg-body: #f4f6f8;
    --bg-panel: #ffffff;
    --bg-panel-alt: #f8fafc;
    --bg-overlay: rgba(255, 255, 255, 0.9);

    --text-primary: #1a202c;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --text-inverse: #ffffff;

    --accent-primary: #2563eb;
    --accent-primary-hover: #1d4ed8;
    --accent-secondary: #ff6b00;
    --accent-secondary-hover: #e65c00;
    --accent-success: #10b981;
    --accent-warning: #f59e0b;
    --accent-danger: #ef4444;

    --border-color: #e2e8f0;
    --border-color-strong: #cbd5e1;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 0 15px rgba(37, 99, 235, 0.3);
}

/* DARK THEME (Cyberpunk) */
[data-theme="dark"] {
    --bg-body: #050507;
    --bg-panel: #0f1015;
    --bg-panel-alt: #1a1b23;
    --bg-overlay: rgba(15, 16, 21, 0.95);

    --text-primary: #e0e6ed;
    --text-secondary: #a0aec0;
    --text-muted: #718096;
    --text-inverse: #0a0a0a;

    --accent-primary: #00f3ff;
    --accent-primary-hover: #00d4e0;
    --accent-secondary: #bc13fe;
    --accent-secondary-hover: #a010dd;
    --accent-success: #00ff88;
    --accent-warning: #ffaa00;
    --accent-danger: #ff3366;

    --border-color: #2d3748;
    --border-color-strong: #4a5568;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 243, 255, 0.4);
    --shadow-glow-secondary: 0 0 20px rgba(188, 19, 254, 0.4);
}

/* GRADIENT PRESETS */
:root {
    --gradient-neon: linear-gradient(135deg, var(--accent-primary) 0%, var(--accent-secondary) 100%);
    --gradient-dark: linear-gradient(180deg, var(--bg-panel) 0%, var(--bg-body) 100%);
    --gradient-hero: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}