:root {
    /* ========================================
       Cyber Neon Colors
       ======================================== */
    --neon-blue: #00f0ff;
    --neon-pink: #ff00ff;
    --neon-purple: #b400ff;
    --neon-green: #00ff88;
    --neon-yellow: #ffff00;
    --neon-orange: #ff6600;
    
    /* ========================================
       Dark Backgrounds
       ======================================== */
    --bg-primary: #0a0a0f;
    --bg-secondary: #0d0d14;
    --bg-tertiary: #12121a;
    --bg-card: #151520;
    --bg-card-hover: #1a1a28;
    
    /* ========================================
       Gradients
       ======================================== */
    --gradient-primary: linear-gradient(135deg, var(--neon-blue), var(--neon-pink));
    --gradient-secondary: linear-gradient(135deg, var(--neon-pink), var(--neon-purple));
    --gradient-blue: linear-gradient(135deg, var(--neon-blue), var(--neon-purple));
    --gradient-card: linear-gradient(135deg, rgba(0, 240, 255, 0.05), rgba(255, 0, 255, 0.05));
    --gradient-card-hover: linear-gradient(135deg, rgba(0, 240, 255, 0.1), rgba(255, 0, 255, 0.1));
    --gradient-border: linear-gradient(135deg, var(--neon-blue), var(--neon-pink), var(--neon-purple));
    
    /* ========================================
       Social Media Colors
       ======================================== */
    --telegram-color: #0088cc;
    --whatsapp-color: #25D366;
    --instagram-color: #E4405F;
    --bale-color: #00a7b5;
    --eitaa-color: #ee7623;
    
    /* ========================================
       Text Colors
       ======================================== */
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.75);
    --text-muted: rgba(255, 255, 255, 0.5);
    --text-dark: rgba(255, 255, 255, 0.35);
    
    /* ========================================
       Border Colors
       ======================================== */
    --border-primary: rgba(0, 240, 255, 0.2);
    --border-secondary: rgba(255, 0, 255, 0.2);
    --border-muted: rgba(255, 255, 255, 0.1);
    
    /* ========================================
       Shadows & Glows
       ======================================== */
    --glow-blue: 0 0 20px rgba(0, 240, 255, 0.4);
    --glow-blue-strong: 0 0 30px rgba(0, 240, 255, 0.6), 0 0 60px rgba(0, 240, 255, 0.3);
    --glow-pink: 0 0 20px rgba(255, 0, 255, 0.4);
    --glow-pink-strong: 0 0 30px rgba(255, 0, 255, 0.6), 0 0 60px rgba(255, 0, 255, 0.3);
    --glow-purple: 0 0 20px rgba(180, 0, 255, 0.4);
    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 20px 60px rgba(0, 0, 0, 0.5), var(--glow-blue);
    
    /* ========================================
       Border Radius
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;
    
    /* ========================================
       Spacing
       ======================================== */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;
    
    /* ========================================
       Typography
       ======================================== */
    --font-primary: 'Vazirmatn', system-ui, -apple-system, sans-serif;
    --font-display: 'Orbitron', 'Rajdhani', var(--font-primary);
    
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;
    --text-4xl: 2.25rem;
    --text-5xl: 3rem;
    
    --font-light: 300;
    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* ========================================
       Transitions
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --transition-bounce: 500ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ========================================
       Z-Index Scale
       ======================================== */
    --z-behind: -1;
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-overlay: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-scanner: 1000;
    
    /* ========================================
       Layout
       ======================================== */
    --container-max: 1280px;
    --container-padding: 20px;
    --header-height: 80px;
    --header-height-scrolled: 70px;
    
    /* ========================================
       Animation Durations
       ======================================== */
    --duration-scan: 4s;
    --duration-particle: 15s;
    --duration-orb: 8s;
    --duration-glow: 2s;
}

/* ========================================
   Dark Mode (Default)
   ======================================== */
[data-theme="dark"] {
    --bg-primary: #0a0a0f;
    --bg-secondary: #0d0d14;
    --text-primary: #ffffff;
}

/* ========================================
   Reduced Motion
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0ms;
        --transition-base: 0ms;
        --transition-slow: 0ms;
        --transition-bounce: 0ms;
        --duration-scan: 0s;
        --duration-particle: 0s;
        --duration-orb: 0s;
    }
}