/* ================================
   🎨 CSS VARIABLES & BASE STYLES
   ================================ */

/* Dark/Light Mode Variables */
:root {
    /* Revolutionary Light Mode Colors - Next-Gen Premium */
    --bg-primary: #ffffff;
    --bg-secondary: #fafbff;
    --bg-tertiary: #f0f4ff;
    --bg-quaternary: #e6f0ff;
    --text-primary: #0a0a0a;
    --text-secondary: #4a5568;
    --text-muted: #718096;
    --accent-primary: #0066ff;
    --accent-secondary: #7c3aed;
    --accent-tertiary: #059669;
    --accent-quaternary: #dc2626;
    
    /* Revolutionary Glass System */
    --glass-bg: rgba(255, 255, 255, 0.85);
    --glass-bg-strong: rgba(255, 255, 255, 0.98);
    --glass-bg-ultra: rgba(255, 255, 255, 0.92);
    --glass-border: rgba(255, 255, 255, 0.8);
    --glass-border-strong: rgba(255, 255, 255, 0.95);
    
    /* Premium Shadow System */
    --shadow-light: rgba(0, 0, 0, 0.03);
    --shadow-medium: rgba(0, 0, 0, 0.08);
    --shadow-heavy: rgba(0, 0, 0, 0.12);
    --shadow-colored: rgba(0, 102, 255, 0.08);
    --shadow-purple: rgba(124, 58, 237, 0.1);
    
    /* Status Colors */
    --success-color: #059669;
    --error-color: #dc2626;
    --warning-color: #d97706;
    
    /* Code and highlight colors */
    --code-bg: rgba(0, 0, 0, 0.1);
    --highlight-bg: rgba(79, 70, 229, 0.05);
    
    /* Light Mode Gradients */
    --gradient-bg: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    --gradient-nav: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(250, 251, 255, 0.95));
    --gradient-text: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary), var(--accent-tertiary));
    --gradient-premium: linear-gradient(135deg, #f0f4ff 0%, #e6f0ff 50%, #dbeafe 100%);
}

/* Dark Mode Colors */
.dark-mode {
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    --text-primary: #ffffff;
    --text-secondary: #98989d;
    --text-muted: #8e8e93;
    --accent-primary: #0a84ff;
    --accent-secondary: #5e5ce6;
    --accent-tertiary: #ff9f0a;
    --glass-bg: rgba(28, 28, 30, 0.8);
    --glass-border: rgba(255, 255, 255, 0.1);
    --shadow-light: rgba(0, 0, 0, 0.3);
    --shadow-medium: rgba(0, 0, 0, 0.4);
    --shadow-heavy: rgba(0, 0, 0, 0.6);
    --success-color: #32d74b;
    --error-color: #ff453a;
    --warning-color: #ff9f0a;
    
    /* Dark mode code colors */
    --code-bg: rgba(255, 255, 255, 0.1);
    --highlight-bg: rgba(255, 255, 255, 0.05);
}

/* ================================
   🚀 RESPONSIVE SCROLLING SYSTEM
   ================================ */

/* ✨ NORMAL BROWSER SCROLLING - ALL DEVICES ✨ */
html {
    scroll-behavior: smooth !important; /* Native smooth scrolling */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: 
        radial-gradient(ellipse at top left, rgba(0, 102, 255, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at top right, rgba(124, 58, 237, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at bottom center, rgba(5, 150, 105, 0.04) 0%, transparent 50%),
        var(--gradient-premium);
    min-height: 100vh;
    transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    background-attachment: fixed;
    position: relative;
    margin: 0;
    padding: 0;
    /* Normal scrolling for all devices */
    overflow-x: hidden;
    overflow-y: auto;
}

/* Remove smooth wrapper system - no longer needed */
.smooth-wrapper {
    display: none !important;
}

.smooth-content {
    display: none !important;
}

/* Desktop: Subtle pattern overlay */
@media (min-width: 1025px) {
    body::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            linear-gradient(45deg, transparent 48%, rgba(255, 255, 255, 0.01) 49%, rgba(255, 255, 255, 0.01) 51%, transparent 52%),
            linear-gradient(-45deg, transparent 48%, rgba(255, 255, 255, 0.01) 49%, rgba(255, 255, 255, 0.01) 51%, transparent 52%);
        background-size: 120px 120px; /* Larger pattern to reduce visibility */
        pointer-events: none;
        z-index: 1;
        opacity: 0.15; /* Much more subtle */
    }
}

/* Mobile: No pattern overlay to avoid visual issues */
@media (max-width: 1024px) {
    body::before {
        display: none; /* Completely disable on mobile */
    }
    
    /* FORCE SCROLLING ON ALL CONTAINERS */
    *, *::before, *::after {
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Critical scrolling fixes for mobile */
    body, html {
        touch-action: pan-y !important;
        overscroll-behavior: auto !important;
    }
}

.dark-mode body {
    background: 
        radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, #000000 0%, #1c1c1e 50%, #2c2c2e 100%);
}

/* Dark mode pattern adjustments */
@media (min-width: 1025px) {
    .dark-mode body::before {
        opacity: 0.05; /* Even more subtle in dark mode */
    }
}

@media (max-width: 1024px) {
    .dark-mode body::before {
        display: none; /* No pattern on mobile */
    }
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}