/**
 * applytogo skin — kanonik token katmanı ("atg" tasarım dili)
 *
 * TEK hex-yazma-izinli dosya budur; bileşen CSS'leri yalnız var(--atg-*) kullanır.
 * Koyu tema Elastic'in kendi mekanizmasına biner: html.dark-mode sınıfı
 * (colorMode çerezi / prefers-color-scheme; bkz. elastic templates/includes/layout.html).
 */

:root {
    color-scheme: light;

    /* ---- 1.1 Marka ---- */
    --atg-primary: #14b8a6;            /* YALNIZ dolgu/ray/vurgu — metin olarak asla */
    --atg-primary-strong: #0d9488;
    --atg-primary-soft: rgba(20, 184, 166, .12);
    --atg-gradient: linear-gradient(15deg, rgb(6, 212, 101), rgb(6, 182, 212));
    --atg-link: #0f766e;
    --atg-link-hover: #115e59;

    /* ---- 1.2 Yüzeyler ve kenarlıklar ---- */
    --atg-bg-ground: #f5f7f5;
    --atg-bg-card: #ffffff;
    --atg-bg-hover: #f6f9fc;
    --atg-bg-inset: #eef2f1;
    --atg-border: #dfe7ef;
    --atg-border-strong: #c9d5e0;
    --atg-scrim: rgba(15, 23, 42, .44);

    /* ---- 1.3 Metin hiyerarşisi ---- */
    --atg-text: #374151;
    --atg-text-strong: #1f2937;
    --atg-text-soft: #495057;
    --atg-text-muted: #5f6b78;
    --atg-text-invert: #ffffff;

    /* ---- 1.4 Semantik: saf dolgu (üzerinde metin YOK) ---- */
    --atg-success: #22c55e;
    --atg-warning: #eab308;
    --atg-danger: #ef4444;
    --atg-info: #3b82f6;

    /* ---- 1.4 Semantik: koyu dolgu + etiket çifti ---- */
    --atg-success-strong: #15803d;
    --atg-warning-strong: #a16207;
    --atg-danger-strong: #b91c1c;
    --atg-info-strong: #1d4ed8;
    --atg-on-strong: #ffffff;
    --atg-on-warning: #422006;         /* parlak --atg-warning dolgusu üstünde */

    /* Semantik tint (üzerinde normal metin durabilen yumuşak dolgu) */
    --atg-danger-soft: rgba(239, 68, 68, .12);

    /* ---- 1.4 Semantik: metin adımları (zemin üzerinde yazı) ---- */
    --atg-success-text: #166534;
    --atg-danger-text: #b91c1c;
    --atg-warning-text: #92400e;
    --atg-info-text: #1d4ed8;

    /* ---- 1.5 Uygulama iskeleti (chrome) ---- */
    --atg-navbar-bg: #ffffff;
    --atg-navbar-fg: #495057;
    --atg-navbar-fg-active: #1f2937;
    --atg-navbar-hover: #f2f6f9;
    --atg-navbar-border: #e8eef4;
    --atg-sidebar-bg: #fbfcfd;
    --atg-sidebar-fg: #495057;
    --atg-sidebar-hover: #f2f6f9;
    --atg-sidebar-active-bg: var(--atg-primary-soft);
    --atg-sidebar-active-fg: #0f766e;
    --atg-badge-bg: #0f766e;           /* dolu marka çipi / birincil buton zemini */
    --atg-badge-fg: #ffffff;
    --atg-scrollbar-thumb: #cbd5e1;
    --atg-scrollbar-thumb-hover: #94a3b8;
    --atg-selection: rgba(20, 184, 166, .22);

    /* ---- 1.6 Liste satırı durumları ---- */
    --atg-row-active-bg: #f4f8fd;      /* okunmamış */
    --atg-row-active-hover: #eaf2fb;   /* okunmamış + hover */
    --atg-row-selected-bg: #e3f6f4;    /* seçili (marka-tintli) */
    --atg-age-warm: #a16207;
    --atg-age-hot: #b91c1c;

    /* ---- 1.7 Mail kağıdı (tema-bağımsız açık) ----
       Kağıt her iki temada da açık kaldığı için aşağıdaki alt-set koyu blokta
       override EDİLMEZ (tek istisna: bg, koyu temada bir tık kırık). embed.css
       bu token'ları @import ile kullanır — kağıt üstü renkler daima buradan. */
    --atg-mailpaper-bg: #ffffff;
    --atg-mailpaper-fg: #1f2937;
    --atg-mailpaper-fg-muted: #5f6b78;
    --atg-mailpaper-link: #0f766e;
    --atg-mailpaper-link-hover: #115e59;
    --atg-mailpaper-accent-bg: #0f766e;  /* kağıt üstü dolu buton/çip zemini */
    --atg-mailpaper-accent-fg: #ffffff;
    --atg-mailpaper-border: #dfe7ef;
    --atg-mailpaper-warning-tint: rgba(234, 179, 8, .15);

    /* ---- 1.8 Geometri ---- */
    --atg-radius-control: 6px;
    --atg-radius-chip: 12px;
    --atg-radius-card: 14px;
    --atg-radius-pill: 9999px;

    /* ---- 1.8 Gölge (teal-tintli, neredeyse görünmez) ---- */
    --atg-shadow-1: 0 1px 2px rgba(16, 58, 48, .04);
    --atg-shadow-2: 0 2px 8px rgba(16, 58, 48, .06);
    --atg-shadow-lift: 0 6px 18px rgba(16, 58, 48, .08);

    /* ---- 1.8 Hareket + focus ---- */
    --atg-dur: 150ms;
    --atg-ease: cubic-bezier(.4, 0, .2, 1);
    --atg-focus-ring: 0 0 0 3px rgba(20, 184, 166, .35);

    /* ---- 1.8 Tipografi ---- */
    --atg-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;

    /* ---- 2.9 Hue-parametrik kimlik çipi (--atg-tint-h inline verilir) ---- */
    --atg-tint-bg: hsl(var(--atg-tint-h, 174) 68% 92%);
    --atg-tint-fg: hsl(var(--atg-tint-h, 174) 62% 28%);

    /* ---- Marka varlığı ölçüleri (atg-brand.css'in tek ayar noktası) ----
       Elastic'in logo kutuları bağlama göre çok farklıdır: görev rayı 78px
       (orta ekranda 42px), telefon çekmecesi 222px, login serbest. Tek varlık
       hepsine sığmaz → dar kutularda kare ayıcık markı, geniş kutularda
       wordmark kullanılır (eşleme config'teki skin_logo'da). */
    --atg-logo-rail: 34px;         /* masaüstü görev rayı (78px kutu, 58px yükseklik) */
    --atg-logo-rail-sm: 26px;      /* orta ekran dar rayı (42px kutu) */
    --atg-logo-drawer-h: 30px;     /* telefon çekmecesi wordmark yüksekliği */
    --atg-logo-drawer-max: 190px;  /* elastic'in 222px sınırının içinde, nefesli */
    --atg-logo-login-h: 52px;      /* login wordmark yüksekliği */
    --atg-logo-login-max: 260px;   /* login form sütunu 320px — taşmaz */

    /* ---- Yoğunluk ekseni (comfortable varsayılan) ---- */
    --atg-row-pad-y: 10px;
    --atg-row-pad-x: 14px;
    --atg-card-pad: 16px;
    --atg-gap: 12px;
}

/* Koyu tema: yalnız token override — bileşen başına koyu kural yazılmaz. */
html.dark-mode {
    color-scheme: dark;

    --atg-primary-soft: rgba(20, 184, 166, .18);
    --atg-link: #2dd4bf;
    --atg-link-hover: #5eead4;

    --atg-bg-ground: #0f172a;
    --atg-bg-card: #1e293b;
    --atg-bg-hover: #243248;
    --atg-bg-inset: #16223a;
    --atg-border: #334155;
    --atg-border-strong: #475569;
    --atg-scrim: rgba(2, 6, 23, .62);

    --atg-text: #e2e8f0;
    --atg-text-strong: #f1f5f9;
    --atg-text-soft: #cbd5e1;
    --atg-text-muted: #9dabc0;
    --atg-text-invert: #0f172a;

    --atg-danger-soft: rgba(239, 68, 68, .18);

    --atg-success-text: #4ade80;
    --atg-danger-text: #f87171;
    --atg-warning-text: #fbbf24;
    --atg-info-text: #60a5fa;

    --atg-navbar-bg: #111c33;
    --atg-navbar-fg: #cbd5e1;
    --atg-navbar-fg-active: #f1f5f9;
    --atg-navbar-hover: #1e293b;
    --atg-navbar-border: #1e293b;
    --atg-sidebar-bg: #16223a;
    --atg-sidebar-fg: #cbd5e1;
    --atg-sidebar-hover: #1e293b;
    --atg-sidebar-active-bg: rgba(20, 184, 166, .16);
    --atg-sidebar-active-fg: #2dd4bf;
    --atg-badge-bg: #2dd4bf;
    --atg-badge-fg: #0f172a;
    --atg-scrollbar-thumb: #334155;
    --atg-scrollbar-thumb-hover: #475569;
    --atg-selection: rgba(45, 212, 191, .28);

    --atg-row-active-bg: #24344f;
    --atg-row-active-hover: #2b3d5c;
    --atg-row-selected-bg: #1d3a48;
    --atg-age-warm: #fbbf24;
    --atg-age-hot: #f87171;

    /* Mail kağıdı koyu temada da AÇIK kalır; yalnız saf beyaz "patlamasın"
       diye bir tık kırık. fg değerleri tema-bağımsız. */
    --atg-mailpaper-bg: #f8fafc;

    --atg-shadow-1: 0 1px 2px rgba(0, 0, 0, .35);
    --atg-shadow-2: 0 2px 8px rgba(0, 0, 0, .40);
    --atg-shadow-lift: 0 6px 18px rgba(0, 0, 0, .45);

    --atg-focus-ring: 0 0 0 3px rgba(45, 212, 191, .40);

    --atg-tint-bg: hsl(var(--atg-tint-h, 174) 42% 22%);
    --atg-tint-fg: hsl(var(--atg-tint-h, 174) 70% 72%);
}

/* Kompakt yoğunluk — bağımsız eksen, tema ile ilişkisiz. */
html[data-atg-density="compact"] {
    --atg-row-pad-y: 5px;
    --atg-row-pad-x: 10px;
    --atg-card-pad: 10px;
    --atg-gap: 8px;
}