/* ═══════════════════════════════════════════════════════════════
 * El3rrab Trading System - Main Styles
 * Auto-extracted from monolithic v3 file
 * Contains: CSS variables, dark theme defaults, base reset
 * ═══════════════════════════════════════════════════════════════ */


:root {
    

/* ═══ Dark Theme (Default) ═══ */
    --bg: #0a0e1a;
    --bg-secondary: #0f1421;
    --bg-card: rgba(20, 27, 45, 0.6);
    --bg-card-solid: #141b2d;
    --bg-elevated: rgba(30, 41, 59, 0.5);
    --bg-elevated-solid: #1e293b;
    --bg-hover: rgba(99, 102, 241, 0.08);
    
    --border: rgba(71, 85, 105, 0.3);
    --border-strong: rgba(71, 85, 105, 0.6);
    --border-glow: rgba(99, 102, 241, 0.2);
    
    --text: #e2e8f0;
    --text-muted: #94a3b8;
    --text-dim: #64748b;
    
    --primary: #6366f1;
    --primary-hover: #7c7ff5;
    --primary-glow: rgba(99, 102, 241, 0.3);
    --success: #10b981;
    --success-glow: rgba(16, 185, 129, 0.3);
    --warning: #f59e0b;
    --warning-glow: rgba(245, 158, 11, 0.3);
    --danger: #ef4444;
    --danger-glow: rgba(239, 68, 68, 0.3);
    --gold: #fbbf24;
    --gold-glow: rgba(251, 191, 36, 0.3);
    
    /* Glassmorphism */
    --glass-blur: 20px;
    --glass-border: rgba(255, 255, 255, 0.06);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 20px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 0 24px rgba(99, 102, 241, 0.15);
    
    /* Animations */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Spacing scale */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 12px;
    --space-lg: 16px;
    --space-xl: 24px;
    --space-2xl: 32px;
    
    /* Border radius */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    --radius-full: 999px;
}



/* ═══ Smooth theme transition ═══ */
* {
    transition: background-color var(--transition-normal),
                border-color var(--transition-normal),
                color var(--transition-normal);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* Better scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { 
    background: var(--bg-secondary); 
    border-radius: 5px; 
}
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary); }

/* Selection color */
::selection {
    background: var(--primary);
    color: white;
}

/* Focus outline */
button:focus-visible,
input:focus-visible,
.tab-btn:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Smooth fade-in for content */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(20px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in { animation: fadeIn var(--transition-normal); }
.scale-in { animation: scaleIn var(--transition-normal); }

body {
    font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 400;
    background: var(--bg);
    background-image: 
        radial-gradient(circle at 20% 0%, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 80% 100%, rgba(251, 191, 36, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 50% 50%, rgba(16, 185, 129, 0.02) 0%, transparent 60%);
    color: var(--text);
    padding: 0 16px 16px 16px;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.container { max-width: 1500px; margin: 0 auto; }