/* =====================================================================
   TEMA TOKEN'LARI — ortak tema (katman 1), her sayfada app.css'ten ÖNCE yüklenir.

   İki tür token var:

   1) BU DOSYADA TANIMLI OLANLAR (aşağıdaki :root) — yeni varyant ve paket CSS'inin
      kullandığı anlamsal değerler. Eski CSS bunlara henüz bağlı değil (Faz 2 / dark mode).

   2) BİLEREK TANIMSIZ BIRAKILANLAR — eski CSS'teki literal'ler şu biçime çevrildi:
        border-radius: var(--r-12, 12px)
        box-shadow:    var(--sh-rest, 0 2px 8px rgba(0,0,0,.08))   (hover/panel: --sh-raised)
        body arka planı: var(--page-bg, #f6f7f9)
      Token tanımsızken tarayıcı fallback'i (orijinal değeri) kullanır → Klasik görünüm birebir aynı.
      Tema seçenekleri (Köşeler / Gölgeler / Sayfa zemini) bunları <style id="theme-tokens">
      bloğunda tanımlar (Services/Theme/ThemeTokenScales.cs). BU DOSYADA TANIMLAMAYIN.
      Kullanılan köşe adımları: 2 3 4 5 6 7 8 10 12 14 15 16 18 20 25 30.

   Kurallar: bu klasörde (themes/) renk literal'i yalnız :root token tanımında yazılır;
   paket dosyaları marka değişkenlerini (--primaryColor, --secondaryColor, --site-font-family,
   --header-accent) tanımlamaz. Denetim: Tools/visual-regression → node lint-theme-css.mjs
   ===================================================================== */
:root {
    /* Nötr yüzeyler ve yazı */
    --surface: #ffffff;
    --surface-alt: #f8f9fa;
    --surface-sunken: #eef0f3;
    --text: #333333;
    --text-strong: #1f2937;
    --text-muted: #6b7280;
    --text-subtle: #9ca3af;
    --border: #e5e7eb;
    --border-soft: #f0f0f0;
    /* Koyu zeminde logo / ödeme ikonu plakası — dark mode'da da beyaz kalır */
    --plate-bg: #ffffff;
    /* Durum renkleri (yazı rengi olarak açık zeminde ≥4.5:1; zemin için color-mix ile açılır) */
    --status-ok: #15803d;
    --status-bad: #b91c1c;
    --status-warn: #92400e;

    /* Yeni bileşenler için adlı köşe ve gölgeler; tema seçenekleriyle birlikte değişir */
    --radius-control: var(--r-8, 8px);
    --radius-card: var(--r-12, 12px);
    --radius-panel: var(--r-12, 12px);
    --radius-badge: var(--r-6, 6px);
    --radius-media: var(--r-8, 8px);
    --shadow-rest: var(--sh-rest, 0 1px 3px rgba(0, 0, 0, 0.06));
    --shadow-raised: var(--sh-raised, 0 8px 24px rgba(0, 0, 0, 0.1));
}