/**
 * 🚀 SOSYALVADI MERKEZİ TEMA DEĞİŞKENLERİ
 * Tüm sitede tek kaynak - 2025 Ultra Modern
 * Dark/Light Mode desteği
 */

:root {
    /* ============================================
       DARK MODE COLORS - Premium
       ============================================ */
    --bg-primary-dark: #0a0e27;
    --bg-secondary-dark: #1a1f3a;
    --bg-tertiary-dark: #252b45;
    --bg-glass-dark: rgba(26, 31, 58, 0.85);
    --text-primary-dark: #ffffff;
    --text-secondary-dark: #b8c5d6;
    --text-muted-dark: #7a8ba3;
    --border-dark: rgba(255, 255, 255, 0.1);
    
    /* ============================================
       LIGHT MODE COLORS - Ultra Modern Premium
       ============================================ */
    --bg-primary-light: #ffffff;
    --bg-secondary-light: #f8fafc;
    --bg-tertiary-light: #f1f5f9;
    --bg-glass-light: rgba(255, 255, 255, 0.95);
    --text-primary-light: #0f172a;
    --text-secondary-light: #475569;
    --text-muted-light: #94a3b8;
    --border-light: rgba(15, 23, 42, 0.08);
    
    /* ============================================
       ACCENT COLORS - Gradient System
       ============================================ */
    --accent-primary: #6366f1;
    --accent-secondary: #8b5cf6;
    --accent-tertiary: #ec4899;
    --accent-blue-light: #3b82f6;
    --accent-purple-light: #8b5cf6;
    --accent-pink-light: #ec4899;
    --accent-hover: #4f46e5;
    --accent-dark: #6366f1;
    --accent-hover-dark: #4f46e5;
    --accent-light: #6366f1;
    --accent-hover-light: #4f46e5;
    
    /* ============================================
       GRADIENTS
       ============================================ */
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --accent-gradient-light: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 50%, #ec4899 100%);
    --accent-gradient-hover: linear-gradient(135deg, #5568d3 0%, #6a3d8f 50%, #e082e8 100%);
    
    /* ============================================
       SHADOWS - Depth System
       ============================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --shadow-accent: 0 8px 30px rgba(99, 102, 241, 0.4);
    
    /* ============================================
       GLASS EFFECTS
       ============================================ */
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
    --glass-light: rgba(255, 255, 255, 0.95);
    --glass-dark: rgba(26, 31, 58, 0.9);
    --glass-bg: var(--glass-dark);
    --glass-bg-light: var(--glass-light);
    --glass-border-light: rgba(99, 102, 241, 0.15);
    
    /* ============================================
       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-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    
    /* ============================================
       LAYOUT
       ============================================ */
    --header-height: 70px;
    --footer-height: 200px;
    --container-max-width: 1400px;
    --content-padding: 20px;
    
    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* ============================================
       SPACING
       ============================================ */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* ============================================
       DEFAULT VALUES (Dark Mode)
       ============================================ */
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --bg-glass: var(--bg-glass-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-muted: var(--text-muted-dark);
    --border: var(--border-dark);
    --accent: var(--accent-primary);
    --accent-hover: var(--accent-hover);
    
    /* Backward Compatibility */
    --border-color: var(--border);
    --accent-primary: var(--accent-primary);
    --accent-secondary: var(--accent-secondary);
}

/* ============================================
   LIGHT MODE OVERRIDE
   ============================================ */
html:not(.dark-mode),
body:not(.dark-mode) {
    --bg-primary: var(--bg-primary-light);
    --bg-secondary: var(--bg-secondary-light);
    --bg-tertiary: var(--bg-tertiary-light);
    --bg-glass: var(--bg-glass-light);
    --text-primary: var(--text-primary-light);
    --text-secondary: var(--text-secondary-light);
    --text-muted: var(--text-muted-light);
    --border: var(--border-light);
    --accent: var(--accent-primary);
    --accent-gradient: var(--accent-gradient-light);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.15);
    --glass: rgba(0, 0, 0, 0.02);
    --glass-border: rgba(99, 102, 241, 0.1);
}

/* ============================================
   DARK MODE CLASS OVERRIDE
   ============================================ */
.dark-mode,
html.dark-mode {
    --bg-primary: var(--bg-primary-dark);
    --bg-secondary: var(--bg-secondary-dark);
    --bg-tertiary: var(--bg-tertiary-dark);
    --bg-glass: var(--bg-glass-dark);
    --text-primary: var(--text-primary-dark);
    --text-secondary: var(--text-secondary-dark);
    --text-muted: var(--text-muted-dark);
    --border: var(--border-dark);
    --accent: var(--accent-primary);
    --accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.7);
    --glass: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.1);
}