/* ============================================================
   Kickly — tasarım belirteçleri (tanıtım sitesi + uygulama ortak).
   Koyu tema varsayılandır ve tanıtım sitesinin (site.css) değerleridir.
   Açık tema yalnızca tema seçen belgelerde devreye girer:
     • <html data-theme="light">  → elle seçilmiş açık tema
     • <html data-theme>          → sistem tercihine uyar (_AppLayout)
     • data-theme özniteliği yok  → hep koyu (_Layout, tanıtım sayfaları)
   Kontrast oranları WCAG 2.x formülüyle hesaplandı (metin ≥ 4.5:1).
   ============================================================ */

:root {
  /* Zemin — nötr siyah değil, hafif yeşile çalan mürekkep */
  --ink:        #050807;
  --ink-1:      #080C0A;
  --ink-2:      #0B110E;
  --surface:    #0D1512;
  --surface-2:  #121C17;
  --surface-3:  #18241E;   /* üzerine gelme / basılı */

  --line:       rgba(255, 255, 255, 0.075);
  --line-2:     rgba(255, 255, 255, 0.14);

  --txt:        #F1F5F2;   /* yüzeyde 16.8:1 */
  --txt-2:      #9CACA3;   /* yüzeyde 7.8:1 — küçük üst bilgi metni için bu */
  --txt-3:      #6E7C74;   /* yüzeyde 4.2:1 — yalnızca büyük/süs metni, pasif öğe */

  --green:      #00E27A;   /* yüzeyde 10.7:1 */
  --green-2:    #0BB863;
  --green-3:    #05703E;
  --green-fill: #00E27A;   /* çubuk, nokta gibi metin olmayan dolgular */
  --green-soft: rgba(0, 226, 122, 0.12);
  --on-green:   #04150C;   /* yeşil dolgu üstündeki metin: 10.9:1 */
  --live:       #FF4438;   /* yüzeyde 5.4:1 */
  --live-soft:  rgba(255, 68, 56, 0.14);
  --on-live:    #1A0503;   /* kırmızı dolgu (kırmızı kart rozeti) üstündeki metin: 5.75:1 */
  --amber:      #FFC043;   /* yüzeyde 11.4:1 */
  --amber-soft: rgba(255, 192, 67, 0.14);
  --amber-fill: #FFC043;
  --blue:       #4C9BFF;   /* deplasman tarafı (momentum, istatistik çubuğu); yüzeyde 6.6:1 */
  --on-blue:    #04150C;   /* mavi dolgu (kadrodaki deplasman oyuncusu) üstündeki metin: 6.7:1 */

  --topbar-bg:  rgba(5, 8, 7, 0.82);
  --glow:       rgba(0, 226, 122, 0.07);
  --shadow:     0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.9);
  --shadow-pop: 0 24px 60px -20px rgba(0, 0, 0, 0.85), 0 0 0 1px var(--line-2);

  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 26px;
  --r-xl: 34px;

  --max: 1200px;
  --gut: 24px;

  --display: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in: cubic-bezier(0.6, 0, 0.9, 0.3);

  /* JS tarafından beslenir */
  --scroll: 0;
  --mx: 50%;
  --my: 30%;
}

/* Tema seçen belgede (uygulama) form öğeleri ve kaydırma çubukları da temaya uyar.
   Tanıtım sayfaları bunu <meta name="color-scheme" content="dark"> ile zaten yapıyor. */
:root[data-theme] { color-scheme: dark; }

/* ── Açık tema ──────────────────────────────────────────────
   Kontrastlar (metin / zemin):
     --txt   #0B1410 : #FFFFFF 18.7  · #F6F8F7 17.6
     --txt-2 #4A5952 : #FFFFFF 7.4   · #F1F5F3 6.7
     --txt-3 #5C6B63 : #FFFFFF 5.6   · #F6F8F7 5.3 · #F1F5F3 5.1
     --green #007A41 : #FFFFFF 5.4   · #F6F8F7 5.1 · #F1F5F3 4.95
       (Planlanan #00A85A açık zeminde yalnızca 3.1:1 / 2.9:1 verdiği için metin
        rengi koyulaştırıldı; #00A85A metin olmayan dolgular için --green-fill'de
        kalır: beyaz üstünde 3.1:1 ≥ grafik öğe eşiği 3:1.)
     --on-green #FFFFFF : #007A41 5.4
     --on-live  #FFFFFF : #C8281C 5.56
     --live  #C8281C : #FFFFFF 5.6   · #F6F8F7 5.2 · #F1F5F3 5.1
     --amber #8F5A00 : #FFFFFF 5.8   · #F1F5F3 5.3
     Dolgular (--green-fill #00A85A, --amber-fill #C78A00) beyaz üstünde ~3:1;
     ilerleme çubuklarının yanında değer her zaman metin olarak da yazılır (9/10).
     --blue  #1F63D6 : #FFFFFF 5.5   (--on-blue #FFFFFF : #1F63D6 5.5)
   ──────────────────────────────────────────────────────────── */

:root[data-theme="light"] {
  color-scheme: light;

  --ink:        #F6F8F7;
  --ink-1:      #EEF2F0;
  --ink-2:      #E7ECE9;
  --surface:    #FFFFFF;
  --surface-2:  #F1F5F3;
  --surface-3:  #E8EEEA;

  --line:       rgba(11, 20, 16, 0.08);
  --line-2:     rgba(11, 20, 16, 0.15);

  --txt:        #0B1410;
  --txt-2:      #4A5952;
  --txt-3:      #5C6B63;

  --green:      #007A41;
  --green-2:    #006636;
  --green-3:    #00A85A;
  --green-fill: #00A85A;
  --green-soft: rgba(0, 168, 90, 0.11);
  --on-green:   #FFFFFF;
  --live:       #C8281C;
  --live-soft:  rgba(200, 40, 28, 0.09);
  --on-live:    #FFFFFF;
  --amber:      #8F5A00;
  --amber-soft: rgba(230, 160, 20, 0.16);
  --amber-fill: #C78A00;
  --blue:       #1F63D6;
  --on-blue:    #FFFFFF;

  --topbar-bg:  rgba(246, 248, 247, 0.86);
  --glow:       rgba(0, 168, 90, 0.08);
  --shadow:     0 1px 2px rgba(11, 20, 16, 0.05), 0 10px 28px -20px rgba(11, 20, 16, 0.22);
  --shadow-pop: 0 24px 50px -18px rgba(11, 20, 16, 0.28), 0 0 0 1px var(--line-2);
}

/* Sistem açık tema istiyorsa ve ziyaretçi elle koyu seçmediyse. Öznitelik şartı
   ([data-theme]) tanıtım sayfalarını (_Layout, özniteliksiz) koyu tutar. */
@media (prefers-color-scheme: light) {
  :root[data-theme]:not([data-theme="dark"]) {
    color-scheme: light;

    --ink:        #F6F8F7;
    --ink-1:      #EEF2F0;
    --ink-2:      #E7ECE9;
    --surface:    #FFFFFF;
    --surface-2:  #F1F5F3;
    --surface-3:  #E8EEEA;

    --line:       rgba(11, 20, 16, 0.08);
    --line-2:     rgba(11, 20, 16, 0.15);

    --txt:        #0B1410;
    --txt-2:      #4A5952;
    --txt-3:      #5C6B63;

    --green:      #007A41;
    --green-2:    #006636;
    --green-3:    #00A85A;
    --green-fill: #00A85A;
    --green-soft: rgba(0, 168, 90, 0.11);
    --on-green:   #FFFFFF;
    --live:       #C8281C;
    --live-soft:  rgba(200, 40, 28, 0.09);
    --on-live:    #FFFFFF;
    --amber:      #8F5A00;
    --amber-soft: rgba(230, 160, 20, 0.16);
    --amber-fill: #C78A00;
    --blue:       #1F63D6;
    --on-blue:    #FFFFFF;

    --topbar-bg:  rgba(246, 248, 247, 0.86);
    --glow:       rgba(0, 168, 90, 0.08);
    --shadow:     0 1px 2px rgba(11, 20, 16, 0.05), 0 10px 28px -20px rgba(11, 20, 16, 0.22);
    --shadow-pop: 0 24px 50px -18px rgba(11, 20, 16, 0.28), 0 0 0 1px var(--line-2);
  }
}

/* ── Uygulama ölçekleri (yalnızca app.css kullanır) ─────────
   Yazı: Archivo başlık/rakam, Manrope metin. Ölçek ~1.15 oranlı,
   14px yoğun arayüz tabanı; paragraf 15px. */
:root {
  --fs-2xs:   11px;   /* rozet: CANLI, 67' */
  --fs-xs:    12px;   /* üst bilgi */
  --fs-sm:    13px;   /* ikincil arayüz metni */
  --fs-base:  14px;   /* arayüz gövdesi */
  --fs-md:    15px;   /* paragraf */
  --fs-lg:    17px;   /* bölme başlığı (h2) */
  --fs-xl:    22px;   /* sayfa başlığı (h1) */
  --fs-2xl:   28px;
  --fs-score: 40px;   /* maç başlığındaki skor */

  --track-tight: -0.02em;  /* Archivo başlıklar */
  --track-caps:   0.08em;  /* yalnızca CANLI rozeti gibi yayın etiketleri */

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  --topbar-h:  60px;
  --col-side:  300px;
  --shell-max: 1600px;
  --shell-pad: 20px;
  --pane-gap:  16px;
}

/* Arapça harfler bitişik yazılır: harf aralığı bağları koparır. */
:root:lang(ar) {
  --track-tight: 0;
  --track-caps:  0;
}