/* =====================================================
   BBL CSS VARIABLES — Design Token'lar
   Tüm renk, font, gölge, border-radius, spacing tanımları
   ===================================================== */

:root {
    /* ===== FONTLAR ===== */
    --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    
    /* ===== ANA RENKLER (Slate Palette) ===== */
    --bg-primary: #0c1222;      /* En koyu arka plan */
    --bg-secondary: #111827;    /* Kart arka planı */
    --bg-tertiary: #1f2937;     /* Hover, aktif durumlar */
    --bg-elevated: #374151;     /* Yükseltilmiş elementler */
    
    /* ===== BORDER & DIVIDER ===== */
    --border-primary: #1f2937;
    --border-secondary: #374151;
    --border-accent: #4b5563;
    
    /* ===== METİN RENKLERİ ===== */
    --text-primary: #f9fafb;    /* Ana metin - neredeyse beyaz */
    --text-secondary: #d1d5db;  /* İkincil metin */
    --text-muted: #9ca3af;      /* Soluk metin */
    --text-disabled: #6b7280;   /* Devre dışı metin */
    
    /* ===== VURGU RENKLERİ ===== */
    --accent-primary: #06b6d4;  /* Turkuaz/Cyan - ana aksiyon */
    --accent-primary-hover: #0891b2;
    --accent-primary-subtle: rgba(6, 182, 212, 0.15);
    
    /* ===== DURUM RENKLERİ (Finans) ===== */
    --positive: #10b981;        /* Yeşil - kazanç */
    --positive-subtle: rgba(16, 185, 129, 0.15);
    --positive-text: #34d399;
    
    --negative: #ef4444;        /* Kırmızı - kayıp */
    --negative-subtle: rgba(239, 68, 68, 0.15);
    --negative-text: #f87171;
    
    --warning: #f59e0b;         /* Sarı - uyarı */
    --warning-subtle: rgba(245, 158, 11, 0.15);
    
    --info: #0ea5e9;            /* Mavi - bilgi */
    --info-subtle: rgba(14, 165, 233, 0.15);
    
    /* ===== ÖZEL RENKLER ===== */
    --gold: #fbbf24;            /* Altın - şampiyon/ödül */
    --gold-subtle: rgba(251, 191, 36, 0.15);
    
    --silver: #94a3b8;          /* Gümüş */
    --bronze: #d97706;          /* Bronz */
    
    /* ===== GÖLGE & EFEKTLER ===== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.25);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.35);
    
    /* ===== BORDER RADIUS ===== */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    
    /* ===== SPACING ===== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    
    /* ===== TRANSİTİON ===== */
    --transition-fast: 150ms ease;
    --transition-normal: 200ms ease;
    --transition-slow: 300ms ease;
    
    /* ===== Z-INDEX KATMANLARı ===== */
    --z-ui: 100;               /* Nav, toolbar gibi sabit UI */
    --z-hover-card: 500;      /* Floating hover panel */
    --z-tooltip: 1000;        /* Tooltip'ler */
    --z-modal: 100010;        /* Modal overlay'ler - mobil sağ panel (100001) üstünde */
    --z-toast: 100020;        /* Toast bildirimleri */
    --z-confirm: 100030;      /* Onay modal'ları */
    
    /* ===== VIEWPORT ===== */
    --vh: 1vh;
}