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

:root {
    /* Primary Colors */
    --cyber-dark: #0A0F1C;
    --cyber-darker: #060A13;
    --cyber-card: #1A2332;
    --cyber-card-alt: #16202E;
    --cyber-card-hover: #212D40;
    --cyber-border: #2E3F54;

    /* Accent Colors */
    --cyber-blue: #4FC3F7;
    --cyber-blue-dark: #29B6F6;
    --cyber-blue-rgb: 79, 195, 247;
    --cyber-purple: #7E57C2;
    --cyber-purple-rgb: 126, 87, 194;
    --cyber-teal: #26A69A;
    --cyber-teal-rgb: 38, 166, 154;

    /* Status Colors */
    --color-success: #26A69A;
    --color-error: #EF4444;
    --color-warning: #F59E0B;

    /* Text Colors */
    --text-primary: #F3F4F6;
    --text-secondary: #D1D5DB;
    --text-muted: #9CA3AF;
    --text-dim: #6B7280;

    /* Gradients */
    --gradient-body: linear-gradient(135deg, #0A0F1C 0%, #0F1A2E 50%, #0A0F1C 100%);
    --gradient-card: linear-gradient(135deg, #1A2332 0%, #16202E 100%);
    --gradient-primary: linear-gradient(135deg, #4FC3F7 0%, #29B6F6 100%);
    --gradient-accent: linear-gradient(90deg, #4FC3F7, #7E57C2);
    --gradient-vertical: linear-gradient(180deg, #4FC3F7, #7E57C2);

    /* Shadows */
    --shadow-glow-blue: 0 0 20px rgba(79, 195, 247, 0.3);
    --shadow-glow-purple: 0 0 20px rgba(126, 87, 194, 0.3);
    --shadow-glow-teal: 0 0 20px rgba(38, 166, 154, 0.3);
    --shadow-card: 0 0 30px rgba(79, 195, 247, 0.15);

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;
    --spacing-3xl: 4rem;

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Typography */
    --font-sans: 'Inter', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    /* Z-Index Scale */
    --z-base: 1;
    --z-dropdown: 10;
    --z-sticky: 20;
    --z-overlay: 50;
    --z-modal: 100;
    --z-scanlines: 100;
}