/* GI Connect — yazı tipi, nötr tonlar ve koyu modda marka rengi (06.10.2026).
 *
 * SON YÜKLENEN DOSYA. `base.html`, `auth/*`, `kvkk/sayfa.html` bunu
 * `bundle.css`ten SONRA yüklüyor. Sebep `docs/frontend.md` "İKİ DOSYA,
 * İKİNCİSİ KAZANIYOR": `bundle.css` token'ları yeniden tanımlıyor; yalnız
 * `static_src/src/styles.css` değişseydi ekran değişmezdi. Token'lar burada
 * katmansız (unlayered) — her iki derlemenin `@layer theme` tanımını eziyor.
 * `styles.css`teki `@theme` değerleri bununla aynı tutuluyor
 * (`theme/tests/test_marka_css.py` denetliyor).
 *
 * Renk KURALLARI ise `@layer utilities` içinde: katmansız bir kural her
 * katmanlı kuralı özgüllükten bağımsız ezerdi (`dark:text-white` dahil).
 */

:root {
  /* Inter: eşit genişlikli rakamlar (tnum) ve küçük boyda okunurluk.
     Outfit'te tnum yoktu; `tabular-nums` sınıfları hiçbir şey yapmıyordu.
     Değişken adı tarihî (`font-outfit` sınıfı body'de); değeri Inter. */
  --font-outfit: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Sıcak nötr ölçek (eski: mavimsi gri). Ölçüt: hiçbir metin/zemin
     çiftinde kontrast eskisinin altına düşmüyor (ölçüm docs/frontend.md). */
  --color-gray-25: #fcfcfb;
  --color-gray-50: #fafaf9;
  --color-gray-100: #f5f5f4;
  --color-gray-200: #e7e5e4;
  --color-gray-300: #d6d3d1;
  --color-gray-400: #a5a09b;
  --color-gray-500: #6f6a65;
  --color-gray-600: #524d48;
  --color-gray-700: #3d3935;
  --color-gray-800: #292524;
  --color-gray-900: #181614;
  --color-gray-950: #0c0a09;
  --color-gray-dark: #211e1b;
  /* `black` şablonda koyu kenar çubuğu zemini (`dark:bg-black`); eskiden
     mavimsi #101828 idi. Sayfa zeminiyle (gray-900) aynı. */
  --color-black: #181614;

  /* Limon ailesi BURADA da tanımlı (06.10.2026, prova): Tailwind v4
     derlemesi yalnız şablonlarda kullanılan token'ı CSS'e yazıyor;
     `accent-300` hiçbir şablonda yok, iki derlemede de tanımsızdı ve
     koyu modda hover rengi `var()` geçersiz kalıp SİYAHA düşüyordu.
     Bu dosyanın başvurduğu her token burada tanımlı olmalı
     (test_marka_css.test_BASVURULAN_HER_TOKEN_TANIMLI). */
  --color-accent-300: #a7f7a7;
  --color-accent-400: #96f596;
  --color-accent-500: #7af27a;
  --color-accent-600: #4fdb4f;
  --color-accent-700: #34b834;
  --color-brand-500: #1e7e67;
  --color-brand-600: #186553;

  /* Veri işareti (grafik çubuğu, eğilim çizgisi, pay çubuğu). Açıkta
     marka yeşili, koyuda marka limonu — `.dark` altında değişiyor. */
  --marka-veri: var(--color-brand-500);
}

/* Koyu modda marka TEK renk: limon (#7af27a ailesi). Eskiden menü limon,
   bağlantılar turkuaz (brand-400 #2ec29f), çoğu bağlantı da koyu yeşil
   (brand-500, gray-900 üstünde 3.6 — AA altı) idi.
   `dark:text-brand-300/400` kullanan 50+ yer token üzerinden limona döner. */
.dark {
  /* Tarayıcının kendi çizdiği denetimler (onay kutusu, tarih, açılır liste,
     kaydırma çubuğu) koyu modda beyaz kalıyordu: koyu şemayı onlara da söyle. */
  color-scheme: dark;
  --color-brand-300: var(--color-accent-300);
  --color-brand-400: var(--color-accent-400);
  --marka-veri: var(--color-accent-500);
}

@layer utilities {
  /* Koyu karşılığı yazılmamış marka metinleri (≈200 yer: bağlantılar,
     "Tümünü gör", ikonlar). `:where` özgüllüğü düşük tutuyor: şablonda
     açık bir `dark:text-…` varsa o kazanır. Dolgu (`bg-brand-500`) bilerek
     dokunulmuyor: üstünde beyaz yazı var, limon üstüne beyaz okunmaz (1.42). */
  .dark :where(.text-brand-500, .text-brand-600, .text-brand-700) {
    color: var(--color-accent-400);
  }
  .dark :where(.hover\:text-brand-500, .hover\:text-brand-600, .hover\:text-brand-700):hover {
    color: var(--color-accent-300);
  }
  .dark :where(.fill-brand-500) {
    fill: var(--color-accent-400);
  }
}

/* Rakam hizası: tablo hücreleri ve tanım listeleri her yerde eşit genişlikli. */
@layer base {
  td, th, dd {
    font-variant-numeric: tabular-nums;
  }
  /* Onay kutusu ve seçenek düğmesi marka renginde (koyuda limon). */
  input[type="checkbox"], input[type="radio"] {
    accent-color: var(--marka-veri);
  }
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: var(--color-gray-700);
}
