/* YakinindaAI - css\variables.css */
/* ═══════════════════════════════════════════
   🎨 YAKININDAI — RENK DEĞİŞKENLERİ
   app_colors.dart ile BİREBİR uyumlu
   ═══════════════════════════════════════════ */

:root {
  /* ─── MARKA RENKLERİ (sabit — tema değişmez) ─── */
  --bordo: #7F1D2D;
  --dark-red: #B91C1C;
  --live-red: #DC2626;
  --coral-red: #EF4444;
  
  --neon-red: #FF1E2D;
  --neon-red-bright: #FF3D4A;
  
  /* ─── SEMANTİK RENKLER (sabit) ─── */
  --success: #10B981;
  --warning: #F59E0B;
  --error: #DC2626;
  --info: #3B82F6;
  --premium-gold: #FFB800;
  
  /* ─── GRADYANLAR ─── */
  --primary-gradient: linear-gradient(90deg, #B91C1C, #DC2626);
  --premium-gradient: linear-gradient(135deg, #7F1D2D, #B91C1C);
  --live-gradient: linear-gradient(135deg, #DC2626, #EF4444);
  
  /* ─── GÖLGE ─── */
  --shadow-red: rgba(185, 28, 28, 0.25);
  --shadow-light: rgba(0, 0, 0, 0.06);
  --shadow-medium: rgba(0, 0, 0, 0.12);
  
  /* ─── BORDER RADIUS ─── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-round: 50%;
  
  /* ─── SPACING ─── */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;
  --space-2xl: 24px;
  --space-3xl: 32px;
  --space-4xl: 40px;
  
  /* ─── FONT ─── */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
                 'Helvetica Neue', Arial, sans-serif;
  
  /* ─── TRANSITION ─── */
  --transition-fast: 150ms ease;
  --transition: 200ms ease;
  --transition-slow: 300ms ease;
  
  /* ─── Z-INDEX ─── */
  --z-header: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --z-dropdown: 1500;
  
  /* ─── LAYOUT ─── */
  --max-width: 1200px;
  --header-height: 72px;
}

/* ═══════════════════════════════════════════
   🌙 DARK TEMA (varsayılan)
   ═══════════════════════════════════════════ */
[data-theme="dark"],
:root:not([data-theme="light"]) {
  --bg-primary: #18181B;
  --bg-secondary: #1F1F23;
  --bg-tertiary: #27272A;
  --bg-elevated: #3F3F46;
  
  --surface: #1F1F23;
  --card: #27272A;
  --card-hover: #3F3F46;
  
  --border: #3F3F46;
  --border-light: #27272A;
  --divider: #27272A;
  
  --text-primary: #F4F4F5;
  --text-secondary: #A1A1AA;
  --text-hint: #71717A;
  --text-disabled: #52525B;
  
  --input-bg: #18181B;
  --input-border: rgba(255, 30, 45, 0.2);
  --input-focus: #FF1E2D;
  
  --overlay: rgba(0, 0, 0, 0.6);
  --overlay-light: rgba(0, 0, 0, 0.3);
}

/* ═══════════════════════════════════════════
   ☀️ LIGHT TEMA
   ═══════════════════════════════════════════ */
[data-theme="light"] {
  --bg-primary: #F8F9FA;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #F3F4F6;
  --bg-elevated: #E5E7EB;
  
  --surface: #FFFFFF;
  --card: #FFFFFF;
  --card-hover: #F9FAFB;
  
  --border: #E5E7EB;
  --border-light: #F3F4F6;
  --divider: #F3F4F6;
  
  --text-primary: #111827;
  --text-secondary: #6B7280;
  --text-hint: #9CA3AF;
  --text-disabled: #D1D5DB;
  
  --input-bg: #FFFFFF;
  --input-border: rgba(255, 30, 45, 0.2);
  --input-focus: #FF1E2D;
  
  --overlay: rgba(0, 0, 0, 0.5);
  --overlay-light: rgba(0, 0, 0, 0.2);
}

/* ═══════════════════════════════════════════
   🌈 RENK KISAYOLLARI (tema-aware)
   ═══════════════════════════════════════════ */
:root {
  --color-bg: var(--bg-primary);
  --color-surface: var(--surface);
  --color-card: var(--card);
  --color-border: var(--border);
  --color-text: var(--text-primary);
  --color-text-muted: var(--text-secondary);
  --color-text-faint: var(--text-hint);
  --color-accent: var(--neon-red);
}