/**
 * palette.css — GENİŞLETİLMİŞ RENK SKALASI.
 *
 * Tabler 12 renk tonu getiriyor (blue, azure, indigo, purple, pink, red,
 * orange, yellow, lime, green, teal, cyan). Bu dosya 14 ton daha ekliyor ve
 * hepsi için aynı varyant ailesini tanımlıyor. Toplam 26 ton.
 *
 * Sınıf ailesi (X = ton adı):
 *   .text-bg-X        dolu zemin + üstünde okunur yazı  (rozet, etiket)
 *   .bg-X             dolu zemin
 *   .bg-X-lt          yumuşak zemin (%12 ton) + koyu/açık okunur yazı
 *   .text-X           yalnız yazı
 *   .badge-outline-X  çerçeveli rozet — 26 tonun HEPSİNDE var
 *   .btn-X            dolu buton
 *   .btn-outline-X    çerçeveli buton
 *   .btn-ghost-X      zeminsiz buton
 *
 * İKİ TEMA: renk DEĞERLERİ theme-light.css / theme-dark.css içinde; burada tek
 * bir hex yok. Koyu temada tonlar açılır, yumuşak/çerçeveli varyantların yazı
 * tonu ayrı bir token'dan (`--tblr-X-on`) gelir — doygun ton koyu zeminde
 * WCAG AA'nın altında kalıyor. Aynı düzeltme Tabler'ın kendi 12 tonuna da
 * uygulanıyor (dosyanın sonu).
 *
 * Yükleme sırası: app-tabler.css'ten SONRA, responsive.css'ten önce.
 * Bu dosya ÜRETİLMİŞ gibidir: yeni ton eklerken tokenları iki tema dosyasına,
 * ton adını da aşağıdaki seçici listelerine ekle.
 */

/* --- Ton başına token bağlama: her sınıf ailesi bu üç değişkeni okur. --- */
.text-bg-amber,
.bg-amber,
.bg-amber-lt,
.text-amber,
.badge-outline-amber,
.btn-amber,
.btn-outline-amber,
.btn-ghost-amber {
    --pal: var(--tblr-amber);
    --pal-on: var(--tblr-amber-on);
    --pal-fg: var(--tblr-dark);
}
.text-bg-sand,
.bg-sand,
.bg-sand-lt,
.text-sand,
.badge-outline-sand,
.btn-sand,
.btn-outline-sand,
.btn-ghost-sand {
    --pal: var(--tblr-sand);
    --pal-on: var(--tblr-sand-on);
    --pal-fg: var(--tblr-dark);
}
.text-bg-mint,
.bg-mint,
.bg-mint-lt,
.text-mint,
.badge-outline-mint,
.btn-mint,
.btn-outline-mint,
.btn-ghost-mint {
    --pal: var(--tblr-mint);
    --pal-on: var(--tblr-mint-on);
    --pal-fg: var(--tblr-dark);
}
.text-bg-sky,
.bg-sky,
.bg-sky-lt,
.text-sky,
.badge-outline-sky,
.btn-sky,
.btn-outline-sky,
.btn-ghost-sky {
    --pal: var(--tblr-sky);
    --pal-on: var(--tblr-sky-on);
    --pal-fg: var(--tblr-dark);
}
.text-bg-lavender,
.bg-lavender,
.bg-lavender-lt,
.text-lavender,
.badge-outline-lavender,
.btn-lavender,
.btn-outline-lavender,
.btn-ghost-lavender {
    --pal: var(--tblr-lavender);
    --pal-on: var(--tblr-lavender-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-violet,
.bg-violet,
.bg-violet-lt,
.text-violet,
.badge-outline-violet,
.btn-violet,
.btn-outline-violet,
.btn-ghost-violet {
    --pal: var(--tblr-violet);
    --pal-on: var(--tblr-violet-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-plum,
.bg-plum,
.bg-plum-lt,
.text-plum,
.badge-outline-plum,
.btn-plum,
.btn-outline-plum,
.btn-ghost-plum {
    --pal: var(--tblr-plum);
    --pal-on: var(--tblr-plum-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-magenta,
.bg-magenta,
.bg-magenta-lt,
.text-magenta,
.badge-outline-magenta,
.btn-magenta,
.btn-outline-magenta,
.btn-ghost-magenta {
    --pal: var(--tblr-magenta);
    --pal-on: var(--tblr-magenta-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-rose,
.bg-rose,
.bg-rose-lt,
.text-rose,
.badge-outline-rose,
.btn-rose,
.btn-outline-rose,
.btn-ghost-rose {
    --pal: var(--tblr-rose);
    --pal-on: var(--tblr-rose-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-coral,
.bg-coral,
.bg-coral-lt,
.text-coral,
.badge-outline-coral,
.btn-coral,
.btn-outline-coral,
.btn-ghost-coral {
    --pal: var(--tblr-coral);
    --pal-on: var(--tblr-coral-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-brown,
.bg-brown,
.bg-brown-lt,
.text-brown,
.badge-outline-brown,
.btn-brown,
.btn-outline-brown,
.btn-ghost-brown {
    --pal: var(--tblr-brown);
    --pal-on: var(--tblr-brown-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-olive,
.bg-olive,
.bg-olive-lt,
.text-olive,
.badge-outline-olive,
.btn-olive,
.btn-outline-olive,
.btn-ghost-olive {
    --pal: var(--tblr-olive);
    --pal-on: var(--tblr-olive-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-steel,
.bg-steel,
.bg-steel-lt,
.text-steel,
.badge-outline-steel,
.btn-steel,
.btn-outline-steel,
.btn-ghost-steel {
    --pal: var(--tblr-steel);
    --pal-on: var(--tblr-steel-on);
    --pal-fg: var(--tblr-light);
}
.text-bg-slate,
.bg-slate,
.bg-slate-lt,
.text-slate,
.badge-outline-slate,
.btn-slate,
.btn-outline-slate,
.btn-ghost-slate {
    --pal: var(--tblr-slate);
    --pal-on: var(--tblr-slate-on);
    --pal-fg: var(--tblr-light);
}

/* Tabler'ın kendi tonları için yalnızca çerçeveli rozet eklenir. */
.badge-outline-blue {
    --pal: var(--tblr-blue);
    --pal-on: var(--tblr-blue-on);
}
.badge-outline-azure {
    --pal: var(--tblr-azure);
    --pal-on: var(--tblr-azure-on);
}
.badge-outline-indigo {
    --pal: var(--tblr-indigo);
    --pal-on: var(--tblr-indigo-on);
}
.badge-outline-purple {
    --pal: var(--tblr-purple);
    --pal-on: var(--tblr-purple-on);
}
.badge-outline-pink {
    --pal: var(--tblr-pink);
    --pal-on: var(--tblr-pink-on);
}
.badge-outline-red {
    --pal: var(--tblr-red);
    --pal-on: var(--tblr-red-on);
}
.badge-outline-orange {
    --pal: var(--tblr-orange);
    --pal-on: var(--tblr-orange-on);
}
.badge-outline-yellow {
    --pal: var(--tblr-yellow);
    --pal-on: var(--tblr-yellow-on);
}
.badge-outline-lime {
    --pal: var(--tblr-lime);
    --pal-on: var(--tblr-lime-on);
}
.badge-outline-green {
    --pal: var(--tblr-green);
    --pal-on: var(--tblr-green-on);
}
.badge-outline-teal {
    --pal: var(--tblr-teal);
    --pal-on: var(--tblr-teal-on);
}
.badge-outline-cyan {
    --pal: var(--tblr-cyan);
    --pal-on: var(--tblr-cyan-on);
}

/* --- Dolu zemin --- */
.text-bg-amber,
.text-bg-sand,
.text-bg-mint,
.text-bg-sky,
.text-bg-lavender,
.text-bg-violet,
.text-bg-plum,
.text-bg-magenta,
.text-bg-rose,
.text-bg-coral,
.text-bg-brown,
.text-bg-olive,
.text-bg-steel,
.text-bg-slate,
.bg-amber,
.bg-sand,
.bg-mint,
.bg-sky,
.bg-lavender,
.bg-violet,
.bg-plum,
.bg-magenta,
.bg-rose,
.bg-coral,
.bg-brown,
.bg-olive,
.bg-steel,
.bg-slate {
    color: var(--pal-fg) !important;
    background-color: var(--pal) !important;
}

/* --- Yumuşak zemin: ton %12, çerçeve %20. Zemin YARI SAYDAM olduğu için
   iki temada da altındaki yüzeyle karışır; ayrı koyu değer gerekmez. --- */
.bg-amber-lt,
.bg-sand-lt,
.bg-mint-lt,
.bg-sky-lt,
.bg-lavender-lt,
.bg-violet-lt,
.bg-plum-lt,
.bg-magenta-lt,
.bg-rose-lt,
.bg-coral-lt,
.bg-brown-lt,
.bg-olive-lt,
.bg-steel-lt,
.bg-slate-lt {
    color: var(--pal-on) !important;
    background-color: color-mix(in oklab, var(--pal) 12%, transparent) !important;
    border-color: color-mix(in oklab, var(--pal) 20%, transparent) !important;
}

/* --- Yalnız yazı --- */
.text-amber,
.text-sand,
.text-mint,
.text-sky,
.text-lavender,
.text-violet,
.text-plum,
.text-magenta,
.text-rose,
.text-coral,
.text-brown,
.text-olive,
.text-steel,
.text-slate {
    color: var(--pal-on) !important;
}

/* --- Çerçeveli rozet — 26 tonun tamamı.
   Tabler'da yalnızca `.badge-outline` var ve rengi currentColor'dan alır;
   ton adıyla tek sınıfta kullanılamıyordu. --- */
.badge-outline-amber,
.badge-outline-sand,
.badge-outline-mint,
.badge-outline-sky,
.badge-outline-lavender,
.badge-outline-violet,
.badge-outline-plum,
.badge-outline-magenta,
.badge-outline-rose,
.badge-outline-coral,
.badge-outline-brown,
.badge-outline-olive,
.badge-outline-steel,
.badge-outline-slate,
.badge-outline-blue,
.badge-outline-azure,
.badge-outline-indigo,
.badge-outline-purple,
.badge-outline-pink,
.badge-outline-red,
.badge-outline-orange,
.badge-outline-yellow,
.badge-outline-lime,
.badge-outline-green,
.badge-outline-teal,
.badge-outline-cyan {
    color: var(--pal-on) !important;
    background-color: transparent !important;
    border: var(--tblr-border-width) var(--tblr-border-style)
            color-mix(in oklab, var(--pal) 45%, transparent) !important;
}

/* --- Butonlar: Tabler'ın --tblr-btn-* sözleşmesi. --- */
.btn-amber,
.btn-sand,
.btn-mint,
.btn-sky,
.btn-lavender,
.btn-violet,
.btn-plum,
.btn-magenta,
.btn-rose,
.btn-coral,
.btn-brown,
.btn-olive,
.btn-steel,
.btn-slate {
    --tblr-btn-color: var(--pal-fg);
    --tblr-btn-bg: var(--pal);
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--pal-fg);
    --tblr-btn-hover-bg: color-mix(in oklab, var(--pal), transparent 20%);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--pal-fg);
    --tblr-btn-active-bg: color-mix(in oklab, var(--pal), transparent 20%);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-disabled-color: var(--pal-fg);
    --tblr-btn-disabled-bg: var(--pal);
    --tblr-btn-disabled-border-color: transparent;
}

.btn-outline-amber,
.btn-outline-sand,
.btn-outline-mint,
.btn-outline-sky,
.btn-outline-lavender,
.btn-outline-violet,
.btn-outline-plum,
.btn-outline-magenta,
.btn-outline-rose,
.btn-outline-coral,
.btn-outline-brown,
.btn-outline-olive,
.btn-outline-steel,
.btn-outline-slate {
    --tblr-btn-color: var(--pal-on);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: var(--pal);
    --tblr-btn-hover-color: var(--pal-fg);
    --tblr-btn-hover-bg: var(--pal);
    --tblr-btn-hover-border-color: var(--pal);
    --tblr-btn-active-color: var(--pal-fg);
    --tblr-btn-active-bg: var(--pal);
    --tblr-btn-active-border-color: var(--pal);
    --tblr-btn-disabled-color: var(--pal-on);
    --tblr-btn-disabled-bg: transparent;
    --tblr-btn-disabled-border-color: var(--pal);
}

.btn-ghost-amber,
.btn-ghost-sand,
.btn-ghost-mint,
.btn-ghost-sky,
.btn-ghost-lavender,
.btn-ghost-violet,
.btn-ghost-plum,
.btn-ghost-magenta,
.btn-ghost-rose,
.btn-ghost-coral,
.btn-ghost-brown,
.btn-ghost-olive,
.btn-ghost-steel,
.btn-ghost-slate {
    --tblr-btn-color: var(--pal-on);
    --tblr-btn-bg: transparent;
    --tblr-btn-border-color: transparent;
    --tblr-btn-hover-color: var(--pal-on);
    --tblr-btn-hover-bg: color-mix(in oklab, var(--pal) 12%, transparent);
    --tblr-btn-hover-border-color: transparent;
    --tblr-btn-active-color: var(--pal-on);
    --tblr-btn-active-bg: color-mix(in oklab, var(--pal) 18%, transparent);
    --tblr-btn-active-border-color: transparent;
    --tblr-btn-disabled-color: var(--pal-on);
    --tblr-btn-disabled-bg: transparent;
    --tblr-btn-disabled-border-color: transparent;
}

/* --- Tabler'ın kendi paletindeki iki okunmaz dolu ton.
   Tabler her tonun üstüne beyaz yazıyor; sarı 2.04:1, lime 2.33:1 çıkıyor
   (asgari 4.5). İkisi de açık ton, yazıyı koyulaştırmak yeterli —
   zemin rengine dokunulmuyor, mevcut ekranların rengi aynı kalıyor. --- */
:root {
    --tblr-yellow-fg: var(--tblr-dark);
    --tblr-lime-fg: var(--tblr-dark);
}
.text-bg-yellow,
.text-bg-lime {
    color: var(--tblr-dark) !important;
}

/* --- Tabler'ın 12 tonu için KOYU TEMA okunabilirlik düzeltmesi.
   `.text-red` gibi sınıflar doygun tonu doğrudan yazı yapıyor; koyu zeminde
   3:1 civarında kalıyorlar (asgari 4.5). Yalnızca YAZI tonu değişir, dolu
   zeminli `.text-bg-*` sınıflarına dokunulmaz. --- */
:root[data-bs-theme="dark"] {
    /* Tabler kendi `-lt` kuralında yazıyı `--tblr-X`'ten alıyor. */
    --tblr-blue-lt: color-mix(in oklab, var(--tblr-blue) 14%, transparent);
    --tblr-azure-lt: color-mix(in oklab, var(--tblr-azure) 14%, transparent);
    --tblr-indigo-lt: color-mix(in oklab, var(--tblr-indigo) 14%, transparent);
    --tblr-purple-lt: color-mix(in oklab, var(--tblr-purple) 14%, transparent);
    --tblr-pink-lt: color-mix(in oklab, var(--tblr-pink) 14%, transparent);
    --tblr-red-lt: color-mix(in oklab, var(--tblr-red) 14%, transparent);
    --tblr-orange-lt: color-mix(in oklab, var(--tblr-orange) 14%, transparent);
    --tblr-yellow-lt: color-mix(in oklab, var(--tblr-yellow) 14%, transparent);
    --tblr-lime-lt: color-mix(in oklab, var(--tblr-lime) 14%, transparent);
    --tblr-green-lt: color-mix(in oklab, var(--tblr-green) 14%, transparent);
    --tblr-teal-lt: color-mix(in oklab, var(--tblr-teal) 14%, transparent);
    --tblr-cyan-lt: color-mix(in oklab, var(--tblr-cyan) 14%, transparent);
}

:root[data-bs-theme="dark"] .text-blue,
:root[data-bs-theme="dark"] .bg-blue-lt {
    color: var(--tblr-blue-on) !important;
}
:root[data-bs-theme="dark"] .text-azure,
:root[data-bs-theme="dark"] .bg-azure-lt {
    color: var(--tblr-azure-on) !important;
}
:root[data-bs-theme="dark"] .text-indigo,
:root[data-bs-theme="dark"] .bg-indigo-lt {
    color: var(--tblr-indigo-on) !important;
}
:root[data-bs-theme="dark"] .text-purple,
:root[data-bs-theme="dark"] .bg-purple-lt {
    color: var(--tblr-purple-on) !important;
}
:root[data-bs-theme="dark"] .text-pink,
:root[data-bs-theme="dark"] .bg-pink-lt {
    color: var(--tblr-pink-on) !important;
}
:root[data-bs-theme="dark"] .text-red,
:root[data-bs-theme="dark"] .bg-red-lt {
    color: var(--tblr-red-on) !important;
}
:root[data-bs-theme="dark"] .text-orange,
:root[data-bs-theme="dark"] .bg-orange-lt {
    color: var(--tblr-orange-on) !important;
}
:root[data-bs-theme="dark"] .text-yellow,
:root[data-bs-theme="dark"] .bg-yellow-lt {
    color: var(--tblr-yellow-on) !important;
}
:root[data-bs-theme="dark"] .text-lime,
:root[data-bs-theme="dark"] .bg-lime-lt {
    color: var(--tblr-lime-on) !important;
}
:root[data-bs-theme="dark"] .text-green,
:root[data-bs-theme="dark"] .bg-green-lt {
    color: var(--tblr-green-on) !important;
}
:root[data-bs-theme="dark"] .text-teal,
:root[data-bs-theme="dark"] .bg-teal-lt {
    color: var(--tblr-teal-on) !important;
}
:root[data-bs-theme="dark"] .text-cyan,
:root[data-bs-theme="dark"] .bg-cyan-lt {
    color: var(--tblr-cyan-on) !important;
}