:root {
    /* Primary Colors - Exact Match to Reference */
    --color-primary: #00D4FF;
    /* Cyan/Turquoise - CTAs, Links, Accents */
    --color-secondary: #000000;
    /* Pure Black - All Backgrounds */
    --color-text: #FFFFFF;
    /* White - Headings, Body Text */

    /* Accent Colors - Cyan Only */
    --color-accent-1: #00D4FF;
    /* Cyan - Same as primary */
    --color-accent-2: #00D4FF;
    /* Cyan - Consistent accent */
    --color-accent-3: #FF4444;
    /* Red - Errors only */

    /* Semantic Colors */
    --color-success: #00D4FF;
    --color-warning: #FFB800;
    --color-error: #FF4444;
    --color-info: var(--color-primary);

    /* Grayscale - Pure Dark Only */
    --color-dark: #000000;
    /* Pure black */
    --color-light: #FFFFFF;
    /* Pure white for text */
    --color-gray-1: #111111;
    /* Near black for cards */
    --color-gray-2: #1A1A1A;
    /* Slightly lighter */
    --color-gray-3: #333333;
    /* Borders */

    /* Typography */
    --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Spacing Scale (Compact) */
    --space-2: 4px;
    --space-4: 8px;
    --space-6: 12px;
    --space-8: 16px;
    --space-12: 24px;
    --space-16: 32px;
    --space-24: 48px;

    /* Layout */
    --width-container: 1200px;
    --width-container-wide: 1400px;

    /* Border Radius */
    --radius-md: 8px;
    --radius-lg: 24px;

    /* Transitions */
    --transition-base: 300ms ease-in-out;

    /* =========================================
       NEON DEPTH ENHANCEMENT SYSTEM
       ========================================= */

    /* Text Colors - Enhanced Contrast */
    --color-text-muted: rgba(255, 255, 255, 0.85);
    /* Was 0.7 */
    --color-text-secondary: rgba(255, 255, 255, 0.85);
    /* Was 0.85 - Neutral White */
    --color-text-accent: rgba(0, 212, 255, 0.9);

    /* Background Gradients - Subtle Depth */
    --bg-card: linear-gradient(145deg, #0c0c10 0%, #080809 100%);
    --bg-section-alt: linear-gradient(180deg, #060608 0%, #000 100%);
    --bg-elevated: #0a0a0e;
    --bg-glass: rgba(8, 8, 12, 0.9);

    /* Shadows - Tight & Precise (NOT diffuse) */
    --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.5);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.6), 0 0 8px rgba(0, 212, 255, 0.1);
    --shadow-glow: 0 0 12px rgba(0, 212, 255, 0.15);
    --shadow-button: 0 2px 8px rgba(0, 212, 255, 0.15);
    --shadow-button-hover: 0 4px 12px rgba(0, 212, 255, 0.25);

    /* Borders - Very Subtle */
    --border-subtle: 1px solid rgba(255, 255, 255, 0.08);
    --border-glow: 1px solid rgba(255, 255, 255, 0.08);
    --border-glow-hover: 1px solid rgba(0, 212, 255, 0.2);
}

/* ========================================= 
   RESPONSIVE OVERRIDES 
   ========================================= */

/* Tablet and below */
@media (max-width: 991.98px) {
    :root {
        --space-24: 36px;
        --space-16: 24px;
        --space-12: 16px;
    }
}

/* Mobile */
@media (max-width: 575.98px) {
    :root {
        --space-24: 24px;
        --space-16: 16px;
        --space-12: 12px;
        --space-8: 12px;
        --radius-lg: 12px;
    }
}