/*
 * KTE Design System — Tek Token Kaynağı
 * Tüm renkler, boşluklar, gölgeler buradan gelir.
 * Editor.css bu değişkenleri kullanır; hardcode renk yazmaz.
 * Admin'den tema seçilince PHP bu :root'u override eder.
 */

/* ══════════════════════════════════════════════════════
   TEMEL TOKENLER — her temada aynı
   ══════════════════════════════════════════════════════ */
:root {
  /* Boşluk (8pt grid) */
  --t-sp1:  4px;
  --t-sp2:  8px;
  --t-sp3: 12px;
  --t-sp4: 16px;
  --t-sp5: 20px;
  --t-sp6: 24px;

  /* Köşe yarıçapı */
  --t-r-xs:  5px;
  --t-r-sm:  8px;
  --t-r:    11px;
  --t-r-lg: 16px;
  --t-r-xl: 22px;

  /* Gölge */
  --t-shadow-xs: 0 1px 2px rgba(0,0,0,.06);
  --t-shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  --t-shadow:    0 2px 8px rgba(0,0,0,.10), 0 0 0 1px rgba(0,0,0,.05);
  --t-shadow-lg: 0 8px 32px rgba(0,0,0,.14), 0 0 0 1px rgba(0,0,0,.06);
  --t-shadow-xl: 0 24px 64px rgba(0,0,0,.18);

  /* Geçiş */
  --t-ease: 130ms cubic-bezier(.25,.46,.45,.94);
  --t-ease-in: 100ms ease-in;
  --t-ease-out: 200ms ease-out;

  /* Durum renkleri (tema-bağımsız) */
  --t-success:      #059669;
  --t-success-soft: rgba(5,150,105,.12);
  --t-warn:         #D97706;
  --t-warn-soft:    rgba(217,119,6,.12);
  --t-danger:       #DC2626;
  --t-danger-soft:  rgba(220,38,38,.12);
  --t-info:         #0284C7;
  --t-info-soft:    rgba(2,132,199,.12);

  /* Editör boyutları */
  --t-header-h:  54px;
  --t-left-w:   214px;
  --t-footer-h:  52px;
  --t-right-w:  320px;
}

/* ══════════════════════════════════════════════════════
   TEMA 1 — INDİGO (Varsayılan)
   Profesyonel mor-mavi, baskı/tasarım araçlarının tonu.
   ══════════════════════════════════════════════════════ */
:root,
#kte-overlay[data-theme="indigo"] {
  --t-accent:        #4F46E5;
  --t-accent-hover:  #4338CA;
  --t-accent-active: #3730A3;
  --t-accent-soft:   rgba(79,70,229,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #EEF0F8;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #F5F6FB;
  --t-surface-3:     #ECEEF6;
  --t-surface-hover: #F0F2FA;

  --t-border:        #E0E3EF;
  --t-border-strong: #C8CCDE;

  --t-text:          #111827;
  --t-text-2:        #374151;
  --t-text-m:        #6B7280;
  --t-text-p:        #9CA3AF;

  --t-header-bg:     #16182A;
  --t-header-fg:     #E8EBF5;
  --t-header-bdr:    rgba(255,255,255,.07);
  --t-header-btn:    rgba(255,255,255,.08);
  --t-header-btn-hv: rgba(255,255,255,.15);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #E0E3EF;
  --t-canvas-bg:     #D4D8E8;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #E0E3EF;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #E0E3EF;

  --t-input-bg:      #F5F6FB;
  --t-input-bdr:     #D8DCF0;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 2 — SAFIR
   Temiz mavi, kurumsal + güven hissi.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="sapphire"] {
  --t-accent:        #2563EB;
  --t-accent-hover:  #1D4ED8;
  --t-accent-active: #1E40AF;
  --t-accent-soft:   rgba(37,99,235,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #EDF2FF;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #F5F8FF;
  --t-surface-3:     #EBF1FF;
  --t-surface-hover: #EEF4FF;

  --t-border:        #DBEAFE;
  --t-border-strong: #BFDBFE;

  --t-text:          #0F172A;
  --t-text-2:        #1E3A5F;
  --t-text-m:        #4B6B8E;
  --t-text-p:        #93B4CC;

  --t-header-bg:     #0C1C3A;
  --t-header-fg:     #E0EAFF;
  --t-header-bdr:    rgba(255,255,255,.07);
  --t-header-btn:    rgba(255,255,255,.08);
  --t-header-btn-hv: rgba(255,255,255,.16);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #DBEAFE;
  --t-canvas-bg:     #C9D8F0;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #DBEAFE;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #DBEAFE;

  --t-input-bg:      #F5F8FF;
  --t-input-bdr:     #BFDBFE;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 3 — ZÜMRİİT
   Yeşil, taze ve organik.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="emerald"] {
  --t-accent:        #059669;
  --t-accent-hover:  #047857;
  --t-accent-active: #065F46;
  --t-accent-soft:   rgba(5,150,105,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #ECFDF5;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #F0FDF8;
  --t-surface-3:     #D1FAE5;
  --t-surface-hover: #ECFDF7;

  --t-border:        #A7F3D0;
  --t-border-strong: #6EE7B7;

  --t-text:          #052E16;
  --t-text-2:        #065F46;
  --t-text-m:        #4B8C6E;
  --t-text-p:        #86BFAB;

  --t-header-bg:     #052E16;
  --t-header-fg:     #D1FAE5;
  --t-header-bdr:    rgba(255,255,255,.08);
  --t-header-btn:    rgba(255,255,255,.08);
  --t-header-btn-hv: rgba(255,255,255,.16);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #A7F3D0;
  --t-canvas-bg:     #B4D9C8;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #A7F3D0;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #A7F3D0;

  --t-input-bg:      #F0FDF8;
  --t-input-bdr:     #6EE7B7;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 4 — GÜLKURUSU
   Güçlü kırmızı-pembe, enerjik + dikkat çekici.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="rose"] {
  --t-accent:        #E11D48;
  --t-accent-hover:  #BE123C;
  --t-accent-active: #9F1239;
  --t-accent-soft:   rgba(225,29,72,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #FFF0F4;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #FFF5F7;
  --t-surface-3:     #FFE4EB;
  --t-surface-hover: #FFF2F5;

  --t-border:        #FECDD3;
  --t-border-strong: #FDA4AF;

  --t-text:          #1A0610;
  --t-text-2:        #4C0519;
  --t-text-m:        #8B4A5A;
  --t-text-p:        #C49AA5;

  --t-header-bg:     #1A0610;
  --t-header-fg:     #FFE4EB;
  --t-header-bdr:    rgba(255,255,255,.07);
  --t-header-btn:    rgba(255,255,255,.08);
  --t-header-btn-hv: rgba(255,255,255,.16);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #FECDD3;
  --t-canvas-bg:     #E8C8D0;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #FECDD3;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #FECDD3;

  --t-input-bg:      #FFF5F7;
  --t-input-bdr:     #FDA4AF;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 5 — KEHRIBAR
   Sıcak altın-turuncu, el sanatları tonu.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="amber"] {
  --t-accent:        #D97706;
  --t-accent-hover:  #B45309;
  --t-accent-active: #92400E;
  --t-accent-soft:   rgba(217,119,6,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #FFFAEB;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #FFFCF0;
  --t-surface-3:     #FEF3C7;
  --t-surface-hover: #FFFBF0;

  --t-border:        #FDE68A;
  --t-border-strong: #FCD34D;

  --t-text:          #1C1207;
  --t-text-2:        #451A03;
  --t-text-m:        #8A6A30;
  --t-text-p:        #C4A567;

  --t-header-bg:     #1C1207;
  --t-header-fg:     #FEF3C7;
  --t-header-bdr:    rgba(255,255,255,.07);
  --t-header-btn:    rgba(255,255,255,.07);
  --t-header-btn-hv: rgba(255,255,255,.14);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #FDE68A;
  --t-canvas-bg:     #DED5B8;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #FDE68A;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #FDE68A;

  --t-input-bg:      #FFFCF0;
  --t-input-bdr:     #FCD34D;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 6 — KAYRAK (Pro Nötr)
   Soğuk gri-mavi, en profesyonel ve sade seçenek.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="slate"] {
  --t-accent:        #475569;
  --t-accent-hover:  #334155;
  --t-accent-active: #1E293B;
  --t-accent-soft:   rgba(71,85,105,.10);
  --t-accent-fg:     #ffffff;

  --t-bg:            #F1F5F9;
  --t-surface:       #FFFFFF;
  --t-surface-2:     #F8FAFC;
  --t-surface-3:     #E2E8F0;
  --t-surface-hover: #F0F4F8;

  --t-border:        #CBD5E1;
  --t-border-strong: #94A3B8;

  --t-text:          #0F172A;
  --t-text-2:        #1E293B;
  --t-text-m:        #64748B;
  --t-text-p:        #94A3B8;

  --t-header-bg:     #0F172A;
  --t-header-fg:     #E2E8F0;
  --t-header-bdr:    rgba(255,255,255,.06);
  --t-header-btn:    rgba(255,255,255,.07);
  --t-header-btn-hv: rgba(255,255,255,.13);

  --t-left-bg:       #FFFFFF;
  --t-left-bdr:      #CBD5E1;
  --t-canvas-bg:     #C8D0DC;
  --t-right-bg:      #FFFFFF;
  --t-right-bdr:     #CBD5E1;
  --t-footer-bg:     #FFFFFF;
  --t-footer-bdr:    #CBD5E1;

  --t-input-bg:      #F8FAFC;
  --t-input-bdr:     #CBD5E1;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   TEMA 7 — DARK PRO
   Tam koyu, gece modu çalışanlar için.
   ══════════════════════════════════════════════════════ */
#kte-overlay[data-theme="dark"] {
  --t-accent:        #818CF8;
  --t-accent-hover:  #6366F1;
  --t-accent-active: #4F46E5;
  --t-accent-soft:   rgba(129,140,248,.12);
  --t-accent-fg:     #ffffff;

  --t-bg:            #080C18;
  --t-surface:       #111827;
  --t-surface-2:     #1A2234;
  --t-surface-3:     #1E2840;
  --t-surface-hover: #1E2844;

  --t-border:        #1F2E48;
  --t-border-strong: #2E4070;

  --t-text:          #E8EBF8;
  --t-text-2:        #B0BAD4;
  --t-text-m:        #6B7A99;
  --t-text-p:        #3E4E6C;

  --t-header-bg:     #050810;
  --t-header-fg:     #CDD5F0;
  --t-header-bdr:    rgba(255,255,255,.05);
  --t-header-btn:    rgba(255,255,255,.06);
  --t-header-btn-hv: rgba(255,255,255,.12);

  --t-left-bg:       #111827;
  --t-left-bdr:      #1F2E48;
  --t-canvas-bg:     #0D1322;
  --t-right-bg:      #111827;
  --t-right-bdr:     #1F2E48;
  --t-footer-bg:     #111827;
  --t-footer-bdr:    #1F2E48;

  --t-input-bg:      #1A2234;
  --t-input-bdr:     #2E4070;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   KOYU TEMA UYUMLULUĞU (body.kte-theme-dark toggle'ı için)
   ══════════════════════════════════════════════════════ */
body.kte-theme-dark #kte-overlay:not([data-theme]) {
  --t-accent:        #818CF8;
  --t-accent-hover:  #6366F1;
  --t-accent-active: #4F46E5;
  --t-accent-soft:   rgba(129,140,248,.12);
  --t-accent-fg:     #ffffff;
  --t-bg:            #080C18;
  --t-surface:       #111827;
  --t-surface-2:     #1A2234;
  --t-surface-3:     #1E2840;
  --t-surface-hover: #1E2844;
  --t-border:        #1F2E48;
  --t-border-strong: #2E4070;
  --t-text:          #E8EBF8;
  --t-text-2:        #B0BAD4;
  --t-text-m:        #6B7A99;
  --t-text-p:        #3E4E6C;
  --t-header-bg:     #050810;
  --t-header-fg:     #CDD5F0;
  --t-header-bdr:    rgba(255,255,255,.05);
  --t-header-btn:    rgba(255,255,255,.06);
  --t-header-btn-hv: rgba(255,255,255,.12);
  --t-left-bg:       #111827;
  --t-left-bdr:      #1F2E48;
  --t-canvas-bg:     #0D1322;
  --t-right-bg:      #111827;
  --t-right-bdr:     #1F2E48;
  --t-footer-bg:     #111827;
  --t-footer-bdr:    #1F2E48;
  --t-input-bg:      #1A2234;
  --t-input-bdr:     #2E4070;
  --t-input-focus:   var(--t-accent);
}

/* ══════════════════════════════════════════════════════
   KÖPRÜ KATMANI — eski değişken isimlerini yeni tokenlara bağlar.
   Editor.css'teki 800+ eski referans (--kte-accent, --kbor, vb.)
   bu köprü sayesinde aktif temadan doğru değeri alır.
   #kte-overlay kapsamında — :root'u kirletmez.
   ══════════════════════════════════════════════════════ */
#kte-overlay {
  /* === --kte-* sistemi (199+57+52+... referans) === */
  --kte-accent:        var(--t-accent);
  --kte-accent-soft:   var(--t-accent-soft);
  --kte-accent-border: var(--t-accent-soft);
  --kte-accent-ink:    var(--t-accent-fg);
  --kte-bg:            var(--t-bg);
  --kte-bg-soft:       var(--t-surface-2);
  --kte-bg-app:        var(--t-bg);
  --kte-bg-canvas:     var(--t-canvas-bg);
  --kte-bg-panel:      var(--t-surface);
  --kte-fg:            var(--t-text);
  --kte-fg-secondary:  var(--t-text-2);
  --kte-fg-tertiary:   var(--t-text-m);
  --kte-surface:       var(--t-surface);
  --kte-surface-2:     var(--t-surface-2);
  --kte-surface-3:     var(--t-surface-3);
  --kte-border:        var(--t-border);
  --kte-border-strong: var(--t-border-strong);
  --kte-text:          var(--t-text);
  --kte-text-dim:      var(--t-text-2);
  --kte-text-mute:     var(--t-text-m);
  --kte-ink:           var(--t-text);
  --kte-line:          var(--t-border);
  --kte-field:         var(--t-input-bg);
  --kte-brand:         var(--t-accent);
  --kte-brand-soft:    var(--t-accent-soft);
  --kte-radius:        var(--t-r);
  --kte-radius-sm:     var(--t-r-sm);
  --kte-shadow:        var(--t-shadow);
  --kte-r-sm:          var(--t-r-sm);
  --kte-r-md:          var(--t-r);
  --kte-r-lg:          var(--t-r-lg);
  --kte-r-xl:          var(--t-r-xl);
  --kte-tr-fast:       var(--t-ease-in);
  --kte-sp-1:          var(--t-sp1);
  --kte-sp-2:          var(--t-sp2);
  --kte-sp-3:          var(--t-sp3);
  --kte-sp-4:          var(--t-sp4);
  --kte-sp-5:          var(--t-sp5);
  --kte-sp-6:          var(--t-sp6);
  --kte-success:       var(--t-success);
  --kte-warn:          var(--t-warn);
  --kte-danger:        var(--t-danger);

  /* === --k* sistemi (52+35+26+24+... referans) === */
  --kbor:              var(--t-border);
  --k-border:          var(--t-border);
  --ktext:             var(--t-text);
  --kmut:              var(--t-text-m);
  --k-text:            var(--t-text);
  --kfield:            var(--t-input-bg);
  --kte-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --k-font:            -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  --k-primary:         var(--t-accent);
  --k-surface:         var(--t-surface);
  --k-muted:           var(--t-text-m);
  --k-radius:          var(--t-r);
  --k-radius-sm:       var(--t-r-sm);
  --k-shadow:          var(--t-shadow-sm);
  --k-shadow-lg:       var(--t-shadow-lg);
  --kb:                var(--t-accent);
  --kbd:               var(--t-accent-hover);
  --kr:                var(--t-danger);
  --kg:                var(--t-success);
  --kbg:               var(--t-surface-2);
  --kte-rail:          var(--t-surface-2);
  --kte-rail2:         var(--t-surface-3);
  --kte-rail-ink:      var(--t-text-m);
}