/* Ligde11 · tasarım jetonları (tokens) · v1.2
   v1.2: vurgu çipleri/etiketleri yeniden lime (--l11-hl); koyu tema zemini koyu gri (#1E2127)
   v1.1: marka Ligde11; önek --f11- → --l11-; lime üst bar jetonları; lime içeride kontrollü
   Kurallar:
   - Lime: üst bar (--l11-bar-bg), birincil buton (--l11-accent) ve vurgu çipleri/etiketleri (--l11-hl).
     Üst bardaki seçili sekme mürekkep (lime bar üstünde lime sekme olmaz).
   - Lime (--l11-accent) yalnızca ZEMİN olarak kullanılır; üstündeki metin her zaman --l11-on-accent (mürekkep).
     Beyaz zemin üstünde lime metin YOK. Açık temada vurgulu metin/bağlantı için --l11-accent-ink kullan.
   - Kırmızı (--l11-danger*) yalnızca ceza ve uyarı içindir.
   - Kulüp renkleri yalnızca kulüp çipleri ve kart şeritlerinde; markada ve arayüz renklerinde kullanılmaz.
   - Varsayılan açık tema; koyu tema [data-theme="dark"] ya da sistem tercihiyle gelir.

   Fontlar (Google Fonts):
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Onest:wght@400;500;600;700;800&display=swap">
*/

:root {
  /* marka (temadan bağımsız) */
  --l11-lime: #C6F135;
  --l11-ink-brand: #14171C;
  --l11-white: #FFFFFF;

  /* üst bar (A): lime bar, tek renk mürekkep logo — iki temada da aynı */
  --l11-bar-bg: #C6F135;
  --l11-bar-ink: #14171C;
  --l11-bar-muted: rgba(20, 23, 28, .72);
  --l11-bar-line: rgba(20, 23, 28, .16);
  --l11-bar-active-bg: #14171C;   /* seçili sekme */
  --l11-bar-active-ink: #FFFFFF;
  --l11-bar-h: 76px;

  /* vurgu (çip, etiket, "sen" satırı, seçili joker): iki temada aynı */
  --l11-hl: #C6F135;
  --l11-on-hl: #14171C;
  /* logo dosyası: ligde11-logo-mono-ink.svg (barda), ligde11-logo-light/dark.svg (diğer yerlerde) */

  /* yazı */
  --l11-font-display: "Sora", "Onest", system-ui, sans-serif;   /* başlık, skor, sayı: 800, letter-spacing -0.035em */
  --l11-font-body: "Onest", system-ui, -apple-system, "Segoe UI", sans-serif;
  --l11-display-tracking: -0.035em;
  --l11-num: tabular-nums;

  /* ölçü */
  --l11-radius-xs: 8px;
  --l11-radius-sm: 10px;
  --l11-radius-md: 14px;
  --l11-radius-lg: 16px;
  --l11-radius-xl: 22px;
  --l11-radius-pill: 999px;
  --l11-space-1: 4px;
  --l11-space-2: 8px;
  --l11-space-3: 12px;
  --l11-space-4: 16px;
  --l11-space-5: 20px;
  --l11-space-6: 28px;
  --l11-space-7: 40px;
  --l11-touch: 44px;            /* en küçük dokunma alanı */
  --l11-btn-h: 52px;
  --l11-btn-h-lg: 60px;

  /* hareket */
  --l11-ease: cubic-bezier(.2, .8, .2, 1);
  --l11-dur-fast: 150ms;
  --l11-dur: 260ms;
  --l11-dur-slow: 520ms;
}

/* ---------------------------------------------------------------- açık tema (varsayılan) */
:root,
[data-theme="light"] {
  --l11-bg: #F3F4F1;              /* sayfa zemini */
  --l11-surface: #FFFFFF;         /* kart */
  --l11-sunk: #ECEEE9;            /* gömülü alan, pasif çip */
  --l11-ink: #14171C;             /* ana metin, koyu blok */
  --l11-ink-2: #434850;           /* ikincil metin */
  --l11-muted: #62676F;           /* açıklama, etiket */
  --l11-line: rgba(20, 23, 28, .14);
  --l11-line-strong: #14171C;     /* buton/çip kenarı */

  --l11-accent: #C6F135;          /* lime: yalnız zemin */
  --l11-on-accent: #14171C;       /* lime üstündeki metin */
  --l11-accent-ink: #3F6B00;      /* açık zeminde vurgu metni/bağlantı */
  --l11-accent-shadow: #14171C;   /* birincil butonun alt gölgesi */

  --l11-ok: #18703C;
  --l11-ok-bg: #E2F4E8;
  --l11-danger: #E3262F;          /* ceza, uyarı */
  --l11-danger-ink: #C81E27;
  --l11-danger-bg: #FDE6E6;

  --l11-score-bg: #14171C;        /* koyu blok: sayaç, skor, canlı */
  --l11-score-ink: #FFFFFF;
  --l11-score-muted: rgba(255, 255, 255, .7);

  --l11-pitch: #3E7B4F;
  --l11-nav: #C6F135;
  --l11-nav-line: #E1E3DE;
  --l11-overlay: rgba(10, 12, 16, .55);
  --l11-shadow: 0 1px 0 rgba(20, 23, 28, .05), 0 6px 16px rgba(20, 23, 28, .08);
  --l11-shadow-pop: 0 20px 60px rgba(0, 0, 0, .4);
  color-scheme: light;
}

/* ---------------------------------------------------------------- koyu tema */
[data-theme="dark"] {
  --l11-bg: #1E2127;
  --l11-surface: #2A2E36;
  --l11-sunk: #353A43;
  --l11-ink: #F2F4EF;
  --l11-ink-2: #C9CDC4;
  --l11-muted: #9AA0A8;
  --l11-line: rgba(255, 255, 255, .13);
  --l11-line-strong: #F2F4EF;

  --l11-accent: #C6F135;
  --l11-on-accent: #14171C;
  --l11-accent-ink: #C6F135;      /* koyu zeminde lime metin kullanılabilir */
  --l11-accent-shadow: #000000;

  --l11-ok: #5FD08A;
  --l11-ok-bg: #1E3A2A;
  --l11-danger: #FF5A5F;
  --l11-danger-ink: #FF6B70;
  --l11-danger-bg: #46262A;

  --l11-score-bg: #15171B;
  --l11-score-ink: #FFFFFF;
  --l11-score-muted: rgba(255, 255, 255, .68);

  --l11-pitch: #2C5A38;
  --l11-nav: #C6F135;   /* üst bar her iki temada lime */
  --l11-nav-line: #262A31;
  --l11-overlay: rgba(0, 0, 0, .6);
  --l11-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .35);
  --l11-shadow-pop: 0 20px 60px rgba(0, 0, 0, .6);
  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --l11-bg: #1E2127;
    --l11-surface: #2A2E36;
    --l11-sunk: #353A43;
    --l11-ink: #F2F4EF;
    --l11-ink-2: #C9CDC4;
    --l11-muted: #9AA0A8;
    --l11-line: rgba(255, 255, 255, .13);
    --l11-line-strong: #F2F4EF;
    --l11-accent-ink: #C6F135;
    --l11-accent-shadow: #000000;
    --l11-ok: #5FD08A;
    --l11-ok-bg: #1E3A2A;
    --l11-danger: #FF5A5F;
    --l11-danger-ink: #FF6B70;
    --l11-danger-bg: #46262A;
    --l11-score-bg: #15171B;
    --l11-score-muted: rgba(255, 255, 255, .68);
    --l11-pitch: #2C5A38;
    --l11-nav: #C6F135;   /* üst bar her iki temada lime */
    --l11-nav-line: #262A31;
    --l11-overlay: rgba(0, 0, 0, .6);
    --l11-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 6px 18px rgba(0, 0, 0, .35);
    --l11-shadow-pop: 0 20px 60px rgba(0, 0, 0, .6);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- temel kullanım örnekleri */
body { background: var(--l11-bg); color: var(--l11-ink); font-family: var(--l11-font-body); -webkit-font-smoothing: antialiased; }
.l11-display { font-family: var(--l11-font-display); font-weight: 800; letter-spacing: var(--l11-display-tracking); font-variant-numeric: var(--l11-num); }
.l11-btn-primary { min-height: var(--l11-btn-h); padding: 0 20px; border: 0; border-radius: var(--l11-radius-md); background: var(--l11-accent); color: var(--l11-on-accent); box-shadow: 0 5px 0 var(--l11-accent-shadow); font-family: var(--l11-font-display); font-weight: 800; }
.l11-btn-secondary { min-height: var(--l11-btn-h); padding: 0 20px; border: 2px solid var(--l11-line-strong); border-radius: var(--l11-radius-md); background: var(--l11-surface); color: var(--l11-ink); box-shadow: 0 4px 0 var(--l11-line-strong); font-weight: 800; }
.l11-penalty { background: var(--l11-danger-bg); color: var(--l11-danger-ink); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }