/* /root/anifehras_v2/frontend/css/tokens.css */
/* AniFehras tasarim token'lari: TUM :root degisken TANIMLARI burada (tek kaynak).
   Bu dosya base.css'ten ONCE yuklenir (index.html). Diger CSS dosyalari yalnizca var() ile KULLANIR.
   Kaynakta kalanlar (bilerek):
     - @property kayitlari (--accent: base.css, --hc: pusula.css)
     - :root color-scheme (base.css) ve :root transition (base.css + pusula.css; cascade sirasi onemli)
     - bilesen ici yerel degiskenler: .vd --vc (pusula.css), .pref-card --card-border-color (components.css)
     - JS'in calisma aninda yazdiklari: --accent, --hc (documentElement), --a, --card-accent, --tc (satir ici)
   Referans: Pusula (ana sayfa) degerleri. Eski adlar yalnizca DEGERI BIREBIR AYNIYSA takma addir. */

:root {
    /* --- Pusula (referans) --- */
    --s1: #12161e;
    --s2: #1a1f2a;
    --line: #252c39;
    --tx: #e9edf4;
    --mu: #8d97a9;
    --anime: #3b82f6;
    --manga: #ff6a2b;
    --drama: #a855f7;
    --ok: #22c55e;
    --no: #f43f5e;
    --gold: #fbbf24;
    --hc: #4a8f6b;
    --r: 12px;

    /* --- Kose olcegi (5b/4): 8 / 12 / 20 / hap. Daireler 50% kalir (token degil). --- */
    --r-sm: 8px;
    --r-lg: 20px;
    --r-pill: 999px;

    /* --- Takma adlar (deger birebir ayni) --- */
    --accent-anime: var(--anime);
    --accent-manga: var(--manga);
    --accent-drama: var(--drama);

    /* --- Kategori vurgusu (JS documentElement uzerinde degistirir) --- */
    --accent: #3b82f6;
    --accent-soft:   color-mix(in srgb, var(--accent) 10%, transparent);
    --accent-border: color-mix(in srgb, var(--accent) 45%, transparent);
    --accent-glow:   color-mix(in srgb, var(--accent) 35%, transparent);

    /* --- Marka rengi (mavi ف): kategoriye gore DEGISMEZ, --anime'ye BILEREK baglanmadi.
       Ayni degerler: index.html #app-loader (CSS yuklenmeden cizildigi icin hex) ve icons/favicon.svg. */
    --brand-1: #3b82f6;
    --brand-2: #00e5ff;

    /* --- Eski adlar: Pusula karsiligindan DEGERI FARKLI. Birlestirme 6b'de (gorunur degisiklik).
       --text-main  ~ --tx      | --text-sub    ~ --mu
       --glass-bg   ~ --s1      | --glass-border ~ --line
       --bg-deep (Pusula'da da bu kullanilir) */
    --bg-deep: #030810;
    --text-main: #f6f9fc;
    --text-sub: #8aa0b6;
    --glass-bg: rgba(8, 15, 26, 0.6);
    --glass-border: rgba(255, 255, 255, 0.08);
    --card-radius: var(--r); /* 5b/4: 16px -> --r takma adi (CSS'te artik kullanilmiyor) */

    /* --- Yerlesim --- */
    --sidebar-width: 80px;
    --bottom-nav-height: 65px;
    /* Ust cubuk yuksekligi (5b/3): TEK deger, tum genisliklerde. .app-bar height bunu kullanir;
       .ad-topbar ve .search-sticky top: var(--appbar-h) ile tam altina yapisir. */
    --appbar-h: 60px;

    /* --- Efekt --- */
    --blur-amount: 12px;
    --blur-amount-mobile: 4px;

    /* --- Yazi --- */
    --font-display: 'Changa', 'Cairo', sans-serif;
    --font-body: 'Cairo', sans-serif;
}

/* Kirilim degerleri (onceden css/responsive.css icindeydi; ayni medya sorgulari, ayni sira).
   992px'teki --appbar-h: 68px 5b/3'te kaldirildi: yukseklik her genislikte 60px. */
@media (max-width: 768px) {
    :root { --blur-amount: var(--blur-amount-mobile); }
}