/* ============================================
   CSS VARIABLES - Design System (Dark Mode Only)
   ============================================ */

:root {
        /* Background Colors - Rich Dark Palette */
        --bg-primary: #0a0a0a;
        --bg-secondary: #151515;
        --bg-tertiary: #1f1f1f;

        /* Text Colors - High Contrast */
        --text-primary: #ffffff;
        --text-secondary: #e0e0e0;
        --text-tertiary: #a0a0a0;

        /* Accent Colors - Vibrant Green */
        --accent-primary: #00ff88;
        --accent-secondary: #00cc70;
        --accent-gradient: linear-gradient(135deg, #00ff88 0%, #00cc70 100%);

        /* Border & Divider */
        --border-color: #2a2a2a;
        --divider-color: rgba(255, 255, 255, 0.1);

        /* Shadows - Enhanced for Dark Mode */
        --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4);
        --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.5);
        --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6);
        --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.8);

        /* Glassmorphism - Dark Mode */
        --glass-bg: rgba(20, 20, 20, 0.6);
        --glass-bg-hover: rgba(30, 30, 30, 0.7);
        --glass-frosted: rgba(255, 255, 255, 0.05);
        --glass-solid: #151515;

        --glass-border: rgba(255, 255, 255, 0.08);
        --glass-border-secondary: rgba(255, 255, 255, 0.05);

        --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
        --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.6);

        /* Gradients */
        --header-gradient: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);

        --hero-gradient: linear-gradient(135deg,
                        rgba(10, 10, 10, 0.98) 0%,
                        rgba(0, 255, 136, 0.08) 50%,
                        rgba(10, 10, 10, 0.98) 100%);

        /* Gradient Mesh Background */
        --gradient-mesh:
                radial-gradient(at 0% 0%, rgba(0, 255, 136, 0.1) 0px, transparent 50%),
                radial-gradient(at 50% 0%, rgba(0, 200, 112, 0.08) 0px, transparent 50%),
                radial-gradient(at 100% 0%, rgba(0, 255, 136, 0.06) 0px, transparent 50%);

        /* Gradient Orbs for Hero Section */
        --gradient-orb-primary: radial-gradient(circle at center,
                        rgba(0, 255, 136, 0.15) 0%,
                        transparent 70%);

        --gradient-orb-secondary: radial-gradient(circle at center,
                        rgba(71, 125, 180, 0.12) 0%,
                        transparent 70%);

        /* Additional Gradients */
        --accent-gradient-soft: linear-gradient(135deg,
                        rgba(0, 255, 136, 0.1) 0%,
                        rgba(0, 204, 112, 0.15) 100%);

        --shimmer-gradient: linear-gradient(90deg,
                        transparent 0%,
                        rgba(255, 255, 255, 0.1) 50%,
                        transparent 100%);

        /* Text Gradients */
        --text-gradient-primary: linear-gradient(135deg,
                        #ffffff 0%,
                        #e0e0e0 50%,
                        #00ff88 100%);

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

        /* Border Radius */
        --radius-sm: 8px;
        --radius-md: 12px;
        --radius-lg: 16px;
        --radius-xl: 24px;
        --radius-2xl: 32px;

        /* Transitions */
        --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
        --transition-bounce: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

        /* Z-index */
        --z-dropdown: 1000;
        --z-sticky: 1020;
        --z-fixed: 1030;
        --z-modal: 2000;
        --z-tooltip: 3000;
}