/* ============================================================
   VIZORA TOKENS.CSS — Level 2 (Semantic Tokens)
   ------------------------------------------------------------
   Bu dosya Level 1 (palette.css) ham renklerinden anlam yüklü
   token'lar üretir. View'lar ve component'lar BU dosyadaki
   değişkenleri kullanır — asla raw hex değil.

   Açık tema (:root) ve Koyu tema ([data-bs-theme="dark"]) için
   ayrı değerler tanımlanır. Tema değişince tüm token'lar
   otomatik güncellenir.

   GEREKLİ: palette.css bu dosyadan ÖNCE yüklenmeli.
   ============================================================ */

/* ============================================================
   LIGHT TEMA (varsayılan)
   ============================================================ */
   :root {

    /* ==========================================================
       SEMANTIC RENKLER
       ========================================================== */
  
    /* Success — başarı, onay, tamamlandı, çalışıyor */
    --vizora-success:         var(--vizora-green-600);
    --vizora-success-soft:    var(--vizora-green-100);
    --vizora-success-dark:    var(--vizora-green-800);
  
    /* Info — bilgi, devam ediyor, nötr bildirim */
    --vizora-info:            var(--vizora-sky-600);
    --vizora-info-soft:       var(--vizora-sky-100);
    --vizora-info-dark:       var(--vizora-sky-800);
    --vizora-info-deep:       var(--vizora-sky-700);  /* zaman sürekliliği (Bu Ay, Bugün-Dün) */
  
    /* Warning — uyarı, dikkat, soft risk */
    --vizora-warning:         var(--vizora-yellow-600);
    --vizora-warning-soft:    var(--vizora-yellow-100);
    --vizora-warning-dark:    var(--vizora-yellow-800);
  
    /* Danger — K12 normal: hata, iptal, alarm, kritik */
    --vizora-danger:          var(--vizora-red-600);
    --vizora-danger-soft:     var(--vizora-red-100);
    --vizora-danger-dark:     var(--vizora-red-800);
  
    /* Neutral — durum yok, pasif, boş, sayım */
    --vizora-neutral:         var(--vizora-slate-500);
    --vizora-neutral-soft:    var(--vizora-slate-100);
    --vizora-neutral-dark:    var(--vizora-slate-700);
  
  
    /* ==========================================================
       K12 ÜÇ TONU — Kırmızı ailesi detaylı
       ========================================================== */
    --vizora-k12-soft-bg:     var(--vizora-red-100);
    --vizora-k12-soft-text:   var(--vizora-red-800);
    --vizora-k12-normal:      var(--vizora-red-600);
    --vizora-k12-dark:        var(--vizora-red-800);
  
  
    /* ==========================================================
       MODÜL RENKLERİ — K11
       ========================================================== */
    --vizora-module-dashboard:  var(--vizora-cyan-600);
    --vizora-module-order:      var(--vizora-emerald-600);
    --vizora-module-production: var(--vizora-blue-800);
    --vizora-module-timeline:   var(--vizora-violet-600);
    --vizora-module-shipment:   var(--vizora-amber-600);
    --vizora-module-brain:      var(--vizora-pink-600);
    --vizora-module-admin:      var(--vizora-teal-700);
  
  
    /* ==========================================================
       APP CHROME — Genel sayfa/arka plan/metin
       ========================================================== */
    --vizora-bg-primary:      var(--vizora-slate-50);    /* ana sayfa arkaplanı */
    --vizora-bg-secondary:    var(--vizora-white);        /* kart arkaplanı */
    --vizora-bg-tertiary:     var(--vizora-slate-100);   /* alt arkaplan (input, hover) */
  
    --vizora-text-primary:    var(--vizora-slate-900);   /* ana metin */
    --vizora-text-secondary:  var(--vizora-slate-600);   /* ikincil metin */
    --vizora-text-tertiary:   var(--vizora-slate-500);   /* ipucu, placeholder */
  
    --vizora-border:          var(--vizora-slate-200);
    --vizora-border-strong:   var(--vizora-slate-300);
  
  
    /* ==========================================================
       KART — vizora-card, vizora-kpi-card
       ========================================================== */
    --vizora-card-bg:         var(--vizora-white);
    --vizora-card-border:     var(--vizora-slate-200);
    --vizora-card-shadow:     0 1px 3px rgba(15, 23, 42, 0.05);
    --vizora-card-shadow-hover: 0 4px 12px rgba(15, 23, 42, 0.08);
  
  
    /* ==========================================================
       KPI
       ========================================================== */
    --vizora-kpi-label:       var(--vizora-text-secondary);
    --vizora-kpi-value:       var(--vizora-text-primary);
  
  
    /* ==========================================================
       CHART — Chart.js ve AG-Grid grafikler
       ========================================================== */
    --vizora-chart-grid:           var(--vizora-slate-200);
    --vizora-chart-axis:           var(--vizora-slate-500);
    --vizora-chart-segment-border: var(--vizora-white); /* doughnut border light */
  
  
    /* ==========================================================
       LOADING — K5 marka gradient
       ========================================================== */
    --vizora-loading-gradient:
      linear-gradient(135deg,
        var(--vizora-cyan-500) 0%,
        var(--vizora-violet-500) 100%);
  
  
    /* ==========================================================
       STATUS BADGE — cross-modül tutarlı
       ========================================================== */
    --vizora-status-success-bg:    var(--vizora-success-soft);
    --vizora-status-success-text:  var(--vizora-success-dark);
    --vizora-status-info-bg:       var(--vizora-info-soft);
    --vizora-status-info-text:     var(--vizora-info-dark);
    --vizora-status-warning-bg:    var(--vizora-warning-soft);
    --vizora-status-warning-text:  var(--vizora-warning-dark);
    --vizora-status-danger-bg:     var(--vizora-danger-soft);
    --vizora-status-danger-text:   var(--vizora-danger-dark);
    --vizora-status-neutral-bg:    var(--vizora-neutral-soft);
    --vizora-status-neutral-text:  var(--vizora-neutral-dark);
  
  
    /* ==========================================================
       SIDENAV — Sol menü
       ========================================================== */
    --vizora-sidenav-bg:           var(--vizora-white);
    --vizora-sidenav-border:       var(--vizora-slate-200);
    --vizora-sidenav-text:         var(--vizora-slate-700);
    --vizora-sidenav-text-active:  var(--vizora-slate-900);
    --vizora-sidenav-hover-bg:     var(--vizora-slate-100);
    --vizora-sidenav-active-bg:    var(--vizora-slate-100);
    --vizora-sidenav-group-title:  var(--vizora-slate-500);
  
  }
  
  
  /* ============================================================
     DARK TEMA
     ============================================================ */
  [data-bs-theme="dark"] {
  
    /* ==========================================================
       SEMANTIC RENKLER (dark override)
       ========================================================== */
    --vizora-success:         var(--vizora-green-500);
    --vizora-success-soft:    var(--vizora-green-950);
    --vizora-success-dark:    var(--vizora-green-200);
  
    --vizora-info:            var(--vizora-sky-500);
    --vizora-info-soft:       var(--vizora-sky-950);
    --vizora-info-dark:       var(--vizora-sky-200);
    --vizora-info-deep:       var(--vizora-sky-400);
  
    --vizora-warning:         var(--vizora-yellow-500);
    --vizora-warning-soft:    var(--vizora-yellow-950);
    --vizora-warning-dark:    var(--vizora-yellow-200);
  
    --vizora-danger:          var(--vizora-red-500);
    --vizora-danger-soft:     var(--vizora-red-950);
    --vizora-danger-dark:     var(--vizora-red-300);
  
    --vizora-neutral:         var(--vizora-slate-400);
    --vizora-neutral-soft:    var(--vizora-slate-800);
    --vizora-neutral-dark:    var(--vizora-slate-300);
  
  
    /* ==========================================================
       K12 ÜÇ TONU (dark)
       ========================================================== */
    --vizora-k12-soft-bg:     var(--vizora-red-950);
    --vizora-k12-soft-text:   var(--vizora-red-300);
    --vizora-k12-normal:      var(--vizora-red-500);
    --vizora-k12-dark:        var(--vizora-red-900);
  
  
    /* ==========================================================
       MODÜL RENKLERİ (dark — daha parlak tonlar)
       ========================================================== */
    --vizora-module-dashboard:  var(--vizora-cyan-400);
    --vizora-module-order:      var(--vizora-emerald-500);
    --vizora-module-production: var(--vizora-blue-500);
    --vizora-module-timeline:   var(--vizora-violet-400);
    --vizora-module-shipment:   var(--vizora-amber-500);
    --vizora-module-brain:      var(--vizora-pink-500);
    --vizora-module-admin:      var(--vizora-teal-500);
  
  
    /* ==========================================================
       APP CHROME (dark)
       ========================================================== */
    --vizora-bg-primary:      #0a0e1a;                  /* navy-black, Bootstrap'ten daha koyu */
    --vizora-bg-secondary:    #111827;                  /* kart arkaplanı (slate-800-ish) */
    --vizora-bg-tertiary:     var(--vizora-slate-800);
  
    --vizora-text-primary:    var(--vizora-slate-100);
    --vizora-text-secondary:  var(--vizora-slate-400);
    --vizora-text-tertiary:   var(--vizora-slate-500);
  
    --vizora-border:          var(--vizora-slate-800);
    --vizora-border-strong:   var(--vizora-slate-700);
  
  
    /* ==========================================================
       KART (dark)
       ========================================================== */
    --vizora-card-bg:         #111827;
    --vizora-card-border:     var(--vizora-slate-800);
    --vizora-card-shadow:     0 1px 3px rgba(0, 0, 0, 0.3);
    --vizora-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
  
  
    /* ==========================================================
       CHART (dark)
       ========================================================== */
    --vizora-chart-grid:           var(--vizora-slate-800);
    --vizora-chart-axis:           var(--vizora-slate-400);
    --vizora-chart-segment-border: transparent; /* doughnut border dark — görünmez */
  
  
    /* ==========================================================
       SIDENAV (dark)
       ========================================================== */
    --vizora-sidenav-bg:           #0a0e1a;
    --vizora-sidenav-border:       var(--vizora-slate-800);
    --vizora-sidenav-text:         var(--vizora-slate-300);
    --vizora-sidenav-text-active:  var(--vizora-slate-100);
    --vizora-sidenav-hover-bg:     var(--vizora-slate-800);
    --vizora-sidenav-active-bg:    var(--vizora-slate-800);
    --vizora-sidenav-group-title:  var(--vizora-slate-500);
  
  }
  
  
  /* ============================================================
     GLOBAL BASE — Bootstrap override
     ------------------------------------------------------------
     Bootstrap 5'in data-bs-theme="dark" davranışını token'larımıza
     bağlıyoruz. Böylece Bootstrap component'ler de (btn, alert,
     table, form-control vb.) otomatik adapte olur.
     ============================================================ */
  body {
    background-color: var(--vizora-bg-primary);
    color: var(--vizora-text-primary);
  }
  
  /* Bootstrap bg-body, bg-body-secondary, text-body-secondary gibi
     utility class'lar token'lara yönlendirilir. Böylece mevcut
     Bootstrap class kullanımları da otomatik token'dan beslenir. */
  :root {
    --bs-body-bg: var(--vizora-bg-primary);
    --bs-body-color: var(--vizora-text-primary);
    --bs-secondary-color: var(--vizora-text-secondary);
    --bs-tertiary-color: var(--vizora-text-tertiary);
    --bs-border-color: var(--vizora-border);
    --bs-body-bg-rgb: 248, 250, 252;
  }
  
  [data-bs-theme="dark"] {
    --bs-body-bg: var(--vizora-bg-primary);
    --bs-body-color: var(--vizora-text-primary);
    --bs-secondary-color: var(--vizora-text-secondary);
    --bs-tertiary-color: var(--vizora-text-tertiary);
    --bs-border-color: var(--vizora-border);
    --bs-body-bg-rgb: 10, 14, 26;
  }