/* ========================================
   EYENAK AI - Consolidated CSS Variables
   Central Color & Design System
   ======================================== */

:root {
    /* ========== PRIMARY COLORS ========== */
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-color: #6366f1;
    --primary-dark-alt: #764ba2;
    
    /* ========== SECONDARY COLORS ========== */
    --secondary-color: #8b5cf6;
    --secondary-light: #a78bfa;
    
    /* ========== ACCENT COLORS ========== */
    --accent: #06b6d4;
    --accent-light: #22d3ee;
    --neon-blue: #00d4ff;
    --neon-purple: #b94fff;
    --neon-pink: #ff006e;
    
    /* ========== BRAND & UI COLORS ========== */
    --color-blue: #58a6ff;
    --color-purple: #a371f7;
    --color-green: #3fb950;
    --color-red: #f85149;
    --color-yellow: #d29922;
    --color-orange: #e2a53a;
    
    /* ========== STATUS COLORS ========== */
    --success: #10b981;
    --success-dark: #2ea043;
    --success-darker: #238636;
    --success-color: #10b981;
    --success-light: #34d399;
    --success-bg: rgba(63, 185, 80, 0.15);
    --success-border: rgba(63, 185, 80, 0.3);
    
    --warning: #f59e0b;
    --warning-color: #f59e0b;
    --warning-dark: #bb8009;
    --warning-bg: rgba(210, 153, 34, 0.15);
    --warning-border: rgba(187, 128, 9, 0.15);
    
    --danger: #f85149;
    --danger-color: #ef4444;
    --danger-dark: #da3633;
    --danger-darker: #991b1b;
    --danger-bg: rgba(248, 81, 73, 0.15);
    --danger-border: rgba(248, 81, 73, 0.3);
    
    --info: #58a6ff;
    --info-bg: rgba(88, 166, 255, 0.15);
    --info-border: rgba(88, 166, 255, 0.3);
    
    /* ========== DARK THEME BACKGROUNDS ========== */
    --dark-bg: #0f172a;
    --bg-primary: #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary: #21262d;
    --bg-hover: #30363d;
    --deep-bg: #0b1220;
    
    /* ========== CARD & SURFACE BACKGROUNDS ========== */
    --card-bg: #1e293b;
    --card-hover: #2d3748;
    --color-surface: #0f172a;
    --color-surface-soft: #111827;
    --color-bg: #0b1220;
    
    /* ========== TEXT COLORS ========== */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #8b949e;
    --text-accent: #58a6ff;
    --text-light: #e6edf3;
    --text-dark: #374151;
    --color-text: #0f172a;
    --color-text-muted: #475569;
    --color-text-soft: #64748b;
    
    /* ========== LIGHT THEME TEXT ========== */
    --text-primary-light: #f0f6fc;
    --text-secondary-light: #c9d1d9;
    
    /* ========== BORDER COLORS ========== */
    --border-color: #334155;
    --border-primary: #30363d;
    --border-secondary: #21262d;
    --border-accent: #58a6ff;
    --color-border: #e2e8f0;
    --color-border-soft: #cbd5e1;
    
    /* ========== GLASS MORPHISM ========== */
    --glass-bg: rgba(255, 255, 255, 0.03);
    --glass-border: rgba(255, 255, 255, 0.08);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    
    /* ========== OVERLAY COLORS ========== */
    --overlay-blue: rgba(88, 166, 255, 0.1);
    --overlay-purple: rgba(163, 113, 247, 0.1);
    --overlay-green: rgba(63, 185, 80, 0.1);
    --overlay-red: rgba(248, 81, 73, 0.1);
    --overlay-black: rgba(0, 0, 0, 0.2);
    
    /* ========== SHADOW COLORS ========== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-blue: 0 8px 24px rgba(88, 166, 255, 0.2);
    --shadow-success: 0 10px 40px rgba(63, 185, 80, 0.4);
    --shadow-danger: 0 10px 40px rgba(248, 81, 73, 0.4);
    --shadow-sm-light: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg-light: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl-light: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    
    /* ========== GLOW EFFECTS ========== */
    --glow-primary: 0 0 40px rgba(99, 102, 241, 0.4);
    --glow-accent: 0 0 40px rgba(6, 182, 212, 0.4);
    
    /* ========== GRADIENT BACKGROUNDS ========== */
    --ai-gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --ai-gradient-2: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
    --ai-gradient-3: linear-gradient(135deg, #06b6d4 0%, #3b82f6 50%, #8b5cf6 100%);
    
    --gradient-primary: linear-gradient(135deg, var(--color-blue) 0%, var(--color-purple) 100%);
    --gradient-success: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%);
    --gradient-danger: linear-gradient(135deg, var(--danger) 0%, var(--danger-dark) 100%);
    --gradient-purple: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-blue: linear-gradient(135deg, #667eea 0%, #3b82f6 100%);
    --gradient-pink: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-green: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-orange: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    --gradient-indigo: linear-gradient(135deg, #a8edea 0%, #6366f1 100%);
    --gradient-teal: linear-gradient(135deg, #08aeea 0%, #2af598 100%);
    --gradient-red: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
    --gradient-yellow: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
    
    /* ========== LIGHT THEME COLORS ========== */
    --light-bg: #ffffff;
    --light-text: #374151;
    --light-muted: #6b7280;
    --light-border: #e5e7eb;
    --light-hover: #f3f4f6;
    --light-subtle: #f8fafc;
    --light-bg-primary: #ffffff;
    --light-bg-secondary: #f8fafc;
    --light-text-primary: #111827;
    --light-text-secondary: #6b7280;
    
    /* ========== PURPLE/VIOLET THEME ========== */
    --color-primary-violet: #7C3AED;
    --color-primary-light-violet: #8B5CF6;
    --color-primary-dark-violet: #6D28D9;
    
    /* ========== SLATE & NEUTRAL COLORS ========== */
    --slate-900: #0f172a;
    --slate-800: #1e293b;
    --slate-700: #334155;
    --slate-600: #475569;
    --slate-500: #64748b;
    --slate-400: #94a3b8;
    --slate-300: #cbd5e1;
    --slate-200: #e2e8f0;
    --slate-100: #f1f5f9;
    --slate-50: #f8fafc;
    
    /* ========== UTILITY COLOR VARIABLES ========== */
    --color-primary-weak: #5b7cfa1a;
    --color-success-bg: rgba(22, 163, 74, 0.15);
    --color-success-border: rgba(22, 163, 74, 0.3);

    --center-box-gradient-after: radial-gradient(circle, rgba(99, 102, 241, 0.2) 0%, transparent 70%);
    --center-box-gradient-before:  radial-gradient(ellipse 80% 50% at 20% 40%, rgba(99, 102, 241, 0.15) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 60%, rgba(139, 92, 246, 0.12) 0%, transparent 50%),
        radial-gradient(ellipse 50% 30% at 50% 80%, rgba(6, 182, 212, 0.1) 0%, transparent 50%);
    --center-box-gradient-bg: linear-gradient(135deg, #0a0a1a 0%, #0d1117 50%, #0f172a 100%);
}

/* ========== LIGHT THEME OVERRIDES ========== */
body[data-theme="light"],
body.light-theme {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;
    --bg-hover: #d1d5db;
    
    /* Text Colors */
    --text-primary: #111827;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --text-accent: #2563eb;
    --text-light: #374151;
    --text-dark: #111827;
    
    /* Border Colors */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;
    --border-accent: #2563eb;
    
    /* Card Colors */
    --card-bg: #f9fafb;
    --card-hover: #f3f4f6;
    --color-surface: #ffffff;
    --color-surface-soft: #f9fafb;
    
    /* Status Colors - Light Theme */
    --success-bg: rgba(16, 185, 129, 0.1);
    --success-border: rgba(16, 185, 129, 0.2);
    
    --danger-bg: rgba(239, 68, 68, 0.1);
    --danger-border: rgba(239, 68, 68, 0.2);
    
    --warning-bg: rgba(245, 158, 11, 0.1);
    --warning-border: rgba(245, 158, 11, 0.2);
    
    --info-bg: rgba(37, 99, 235, 0.1);
    --info-border: rgba(37, 99, 235, 0.2);
}

/* ========== UTILITY CLASSES ========== */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-muted { color: var(--color-text-muted); }
.text-soft { color: var(--color-text-soft); }
.text-accent { color: var(--text-accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger { color: var(--danger); }
.text-info { color: var(--info); }

.bg-primary { background-color: var(--bg-primary); }
.bg-secondary { background-color: var(--bg-secondary); }
.bg-surface { background-color: var(--color-surface); }
.bg-surface-soft { background-color: var(--color-surface-soft); }
.bg-dark { background-color: var(--dark-bg); }

.border-default { border-color: var(--border-primary); }
.border-soft { border-color: var(--color-border-soft); }
.border-accent { border-color: var(--border-accent); }

.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }