/* Tasarım tokenları — Dawayar (دوایار).
   Renkler rgb üçlüsü olarak tutulur ki rgb(var(--vurgu) / .12) gibi
   saydamlıklar tek yerden türesin. Yalnız mantıksal yön özellikleri.

   Üç eksen var ve birbirinden bağımsız:
     data-tema   aydinlik | karanlik   (tema.js "sistem" tercihini buna çözer)
     data-vurgu  zumrut | mavi | mor | gul | kehribar
     dir         rtl (fa, ps) | ltr (en, tr)
   Bileşenler bu üçünü bilmez; yalnız tokenları okur. */

/* Vazirmatn: Dari için çizilmiş açık kaynak (OFL) yazı tipi, tek değişken
   dosya bütün kalınlıkları taşıyor. Sistem yazı tipleri Arap harflerinde
   nokta kümelerini birbirine sokuyor, kalınlığı sahteliyor. swap: yazı tipi
   inene kadar metin görünür kalsın, kasada kimse boş ekrana bakmasın. */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../yazi/vazirmatn.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---- Vurgu (varsayılan zümrüt) ----
     --vurgu       marka tonu: halkalar, grafik, ince dolgular
     --vurgu-koyu  üstünde beyaz yazı duran dolgular (düğme): beyaz 5.5:1
     --vurgu-acik  koyu zeminlerdeki parıltı ve kenar çubuğu
     --vurgu-metin açık yüzeyde vurgu renkli yazı (bağlantı, seçili sekme) */
  --vurgu: 5 150 105;
  --vurgu-koyu: 4 120 87;
  --vurgu-acik: 52 211 153;
  --vurgu-metin: 4 120 87;
  --vurgu-yz: 255 255 255;
  /* Kenar çubuğu: koyu yeşil-siyah degrade. Vurgu değişince kolon da onun
     koyu tonuna döner; yeşil kolonda mavi hap yabancı duruyordu. */
  --kenar-1: 5 32 27;
  --kenar-2: 10 51 44;

  /* ---- Zemin ve yüzeyler (açık tema) ---- */
  --bg: 244 247 246;
  --yuzey: 255 255 255;
  --yuzey-2: 248 250 249;      /* tablo başlığı, hafif dolgular */
  --yuzey-3: 240 244 242;      /* üzerine gelme, ikincil düğme */
  --yuzey-4: 229 235 232;      /* iskelet, ilerleme yolu */
  --cizgi: 15 23 42;           /* her zaman saydamlıkla: .07 ince, .14 kutu */

  --metin: 15 23 42;
  --metin-2: 71 85 105;        /* ikincil: beyazda 7.2:1 */
  --metin-3: 92 107 128;       /* soluk, yer tutucu: beyazda 5.4:1, sayfa zemininde 5:1 (100 116 139 zeminde 4.4 kalıyordu) */

  /* ---- Anlamsal renkler: yalnız durum taşır (iyi/uyarı/tehlike/bilgi),
     hiçbir zaman "dördüncü seri" rengi olarak kullanılmaz. ---- */
  /* -metin tonları kendi açık rozet zemininde (.12–.14) de 4.5:1'i geçsin. */
  --basari: 22 163 74;    --basari-metin: 20 118 56;
  --uyari: 217 119 6;     --uyari-metin: 168 76 8;
  --tehlike: 220 38 38;   --tehlike-metin: 185 28 28;
  --bilgi: 37 99 235;     --bilgi-metin: 29 78 216;

  /* ---- Bölüm tonları: menüdeki simge karosu ve sayfa başlığının şeridi.
     Kullanıcı rengi ezberliyor (stok kehribar, satış yeşil); her sayfada
     aynı ton nerede olduğunu söylüyor. -acik sürümleri her temada koyu
     kenar çubuğu için. ---- */
  --ton-panel: 79 70 229;      --ton-panel-acik: 129 140 248;
  --ton-ilac: 5 150 105;       --ton-ilac-acik: 52 211 153;
  --ton-stok: 217 119 6;       --ton-stok-acik: 251 191 36;
  --ton-alis: 2 132 199;       --ton-alis-acik: 56 189 248;
  --ton-satis: 22 163 74;      --ton-satis-acik: 74 222 128;
  --ton-tedarikci: 124 58 237; --ton-tedarikci-acik: 167 139 250;
  --ton-musteri: 225 29 72;    --ton-musteri-acik: 251 113 133;
  --ton-masraf: 234 88 12;     --ton-masraf-acik: 251 146 60;
  --ton-rapor: 8 145 178;      --ton-rapor-acik: 34 211 238;
  --ton-ayar: 71 85 105;       --ton-ayar-acik: 148 163 184;
  --ton-yonetim: 192 38 211;   --ton-yonetim-acik: 232 121 249;
  /* Sayfa kendi tonunu [data-bolum] ile seçer; seçmezse vurgu. */
  --ton: var(--vurgu);

  /* ---- Grafik serileri: sabit sırayla atanır, döngüye girmez.
     Doğrulandı (renk körlüğü ΔE ≥ 8 komşu çiftlerde, beyazda ≥ 3:1).
     Vurguya BAĞLI DEĞİL: mavi vurgu seçen eczanede 1. seri ile 4. seri
     (gök) birbirine karışırdı. ---- */
  --g1: 5 150 105;  --g2: 79 70 229;  --g3: 217 119 6;
  --g4: 2 132 199;  --g5: 225 29 72;  --g6: 124 58 237;
  --grafik-izgara: 15 23 42 / .07;

  /* ---- Ölçüler ---- */
  --r-xs: 6px; --r-s: 10px; --r: 12px; --r-kart: 16px; --r-l: 20px; --r-tam: 999px;
  --b-1: 4px; --b-2: 8px; --b-3: 12px; --b-4: 16px; --b-5: 20px; --b-6: 24px; --b-7: 32px; --b-8: 48px;
  --dokunma: 40px;            /* en küçük dokunma hedefi */

  /* Gölgeler katmanlı ve yumuşak: kartı kenarlık ayırıyor, gölge yalnız
     derinlik veriyor. Yüzen şeyler (açılır, modal) belirgin biçimde yüksekte. */
  --golge-1: 0 1px 2px rgb(15 23 42 / .05);
  --golge-2: 0 1px 2px rgb(15 23 42 / .04), 0 4px 12px -2px rgb(15 23 42 / .06), 0 14px 28px -12px rgb(15 23 42 / .08);
  --golge-3: 0 10px 28px -6px rgb(15 23 42 / .16), 0 3px 8px rgb(15 23 42 / .06);
  --golge-4: 0 28px 70px -12px rgb(15 23 42 / .32), 0 10px 24px -8px rgb(15 23 42 / .14);
  --kenarlik: 1px solid rgb(var(--cizgi) / .08);
  --kenarlik-2: 1px solid rgb(var(--cizgi) / .14);
  --halka: 0 0 0 3px rgb(var(--vurgu) / .22);
  --ortu: 2 6 6 / .46;
  --cam: 255 255 255 / .78;    /* üst çubuğun bulanık camı */

  /* ---- Yazı ---- */
  --yazi: 'Vazirmatn', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans Arabic', Tahoma, Roboto, Arial, sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
  --f-2xs: .6875rem; --f-xs: .75rem; --f-s: .8125rem; --f-m: .9375rem; --f-l: 1.0625rem;
  --f-xl: 1.375rem; --f-2xl: 1.75rem; --f-3xl: 2.25rem;
  /* Arap yazısı Latin'den daha çok satır aralığı ister: harfler satırın
     altına ve üstüne uzanıyor, dar satırda noktalar birbirine değiyor. */
  --satir: 1.62;
  --satir-baslik: 1.3;

  /* ---- Kabuk ---- */
  --kenar-en: 264px; --kenar-dar: 76px; --ust-boy: 64px; --alt-cubuk: 64px;
  --icerik-en: 1480px;
  --guvenli-alt: env(safe-area-inset-bottom, 0px);

  /* ---- Hareket: tek yay eğrisi, kısa süreler. Arayüz "animasyonlu" değil,
     çevik hissetsin. Hepsi prefers-reduced-motion ile sıfırlanıyor. ---- */
  --egri: cubic-bezier(.2, .8, .2, 1);
  --egri-yay: cubic-bezier(.34, 1.4, .5, 1);
  --hiz-1: 120ms; --hiz-2: 200ms; --hiz-3: 280ms; --hiz-4: 360ms;
  --gecis: var(--hiz-2) var(--egri);

  /* ---- "Bugün" KPI degradeleri: zengin ama metin beyazda okunur. ---- */
  --gr-zumrut: linear-gradient(135deg, #047857 0%, #059669 45%, #0d9488 100%);
  --gr-indigo: linear-gradient(135deg, #4338ca 0%, #6d28d9 100%);
  --gr-gok: linear-gradient(135deg, #0369a1 0%, #2563eb 100%);
  --gr-kehribar: linear-gradient(135deg, #b45309 0%, #ea580c 100%);
  --gr-gul: linear-gradient(135deg, #be123c 0%, #db2777 100%);
  --gr-mor: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%);

  color-scheme: light;
}

/* ---- Vurgu seçenekleri. Kenar çubuğu her birinde o rengin gece tonu. ---- */
:root[data-vurgu="mavi"] {
  --vurgu: 37 99 235; --vurgu-koyu: 29 78 216; --vurgu-acik: 96 165 250; --vurgu-metin: 29 78 216;
  --kenar-1: 8 18 42; --kenar-2: 17 34 74;
}
:root[data-vurgu="mor"] {
  --vurgu: 124 58 237; --vurgu-koyu: 109 40 217; --vurgu-acik: 167 139 250; --vurgu-metin: 109 40 217;
  --kenar-1: 22 12 44; --kenar-2: 39 22 78;
}
:root[data-vurgu="gul"] {
  --vurgu: 225 29 72; --vurgu-koyu: 190 18 60; --vurgu-acik: 251 113 133; --vurgu-metin: 190 18 60;
  --kenar-1: 38 8 18; --kenar-2: 64 14 32;
}
:root[data-vurgu="kehribar"] {
  --vurgu: 217 119 6; --vurgu-koyu: 180 83 9; --vurgu-acik: 251 191 36; --vurgu-metin: 180 83 9;
  --kenar-1: 34 19 6; --kenar-2: 58 32 9;
}

/* ---- Karanlık tema: aynı ton aileleri, koyu yeşilimsi zeminde. Gece
   nöbetindeki eczacı için; vurgular açılır ki koyu zeminde okunsun. ---- */
:root[data-tema="karanlik"] {
  --bg: 8 15 14;
  --yuzey: 15 24 23;
  --yuzey-2: 19 30 29;
  --yuzey-3: 26 39 37;
  --yuzey-4: 36 50 48;
  --cizgi: 210 230 225;

  --metin: 226 232 240;
  --metin-2: 163 177 194;
  --metin-3: 136 152 170;      /* çip ve kart zemininde (yuzey-4) 4.5:1 üstü */

  --vurgu-metin: 52 211 153;
  --basari: 74 222 128;   --basari-metin: 74 222 128;
  --uyari: 251 191 36;    --uyari-metin: 251 191 36;
  --tehlike: 248 113 113; --tehlike-metin: 252 129 129;
  --bilgi: 96 165 250;    --bilgi-metin: 147 197 253;

  --ton-panel: 129 140 248; --ton-ilac: 52 211 153; --ton-stok: 251 191 36; --ton-alis: 56 189 248;
  --ton-satis: 74 222 128; --ton-tedarikci: 167 139 250; --ton-musteri: 251 113 133;
  --ton-masraf: 251 146 60; --ton-rapor: 34 211 238; --ton-ayar: 148 163 184; --ton-yonetim: 232 121 249;

  /* Koyu yüzey için ayrıca doğrulanmış adımlar (otomatik çevirme değil). */
  --g1: 15 159 110; --g2: 99 102 241; --g3: 217 119 6;
  --g4: 2 132 199;  --g5: 225 29 72;  --g6: 147 51 234;
  --grafik-izgara: 210 230 225 / .08;

  --golge-1: 0 1px 2px rgb(0 0 0 / .4);
  --golge-2: 0 1px 2px rgb(0 0 0 / .35), 0 8px 24px -8px rgb(0 0 0 / .5), inset 0 1px 0 rgb(255 255 255 / .03);
  --golge-3: 0 14px 36px -8px rgb(0 0 0 / .65), 0 3px 10px rgb(0 0 0 / .4);
  --golge-4: 0 30px 80px -10px rgb(0 0 0 / .75), 0 10px 24px -8px rgb(0 0 0 / .5);
  --kenarlik: 1px solid rgb(var(--cizgi) / .08);
  --kenarlik-2: 1px solid rgb(var(--cizgi) / .14);
  --halka: 0 0 0 3px rgb(var(--vurgu) / .35);
  --ortu: 0 0 0 / .62;
  --cam: 8 15 14 / .72;
  color-scheme: dark;
}
:root[data-tema="karanlik"][data-vurgu="mavi"] { --vurgu-metin: 147 197 253; }
:root[data-tema="karanlik"][data-vurgu="mor"] { --vurgu-metin: 196 181 253; }
:root[data-tema="karanlik"][data-vurgu="gul"] { --vurgu-metin: 253 164 175; }
:root[data-tema="karanlik"][data-vurgu="kehribar"] { --vurgu-metin: 252 211 77; }

/* Bölüm tonu: sayfa kökü, başlık ve menü öğesi kendi tonunu buradan alır. */
[data-bolum="panel"] { --ton: var(--ton-panel); }
[data-bolum="ilac"] { --ton: var(--ton-ilac); }
[data-bolum="stok"] { --ton: var(--ton-stok); }
[data-bolum="alis"] { --ton: var(--ton-alis); }
[data-bolum="satis"] { --ton: var(--ton-satis); }
[data-bolum="tedarikci"] { --ton: var(--ton-tedarikci); }
[data-bolum="musteri"] { --ton: var(--ton-musteri); }
[data-bolum="masraf"] { --ton: var(--ton-masraf); }
[data-bolum="rapor"] { --ton: var(--ton-rapor); }
[data-bolum="ayar"] { --ton: var(--ton-ayar); }
[data-bolum="yonetim"] { --ton: var(--ton-yonetim); }

/* Telefonda üst çubuk biraz alçak, kenar boşlukları 16 px. */
@media (max-width: 900px) {
  :root { --ust-boy: 58px; }
}

/* Azaltılmış hareket: süreler sıfırlanır; JS tarafı da (sayaç, grafik)
   aynı medya sorgusuna bakıp doğrudan son hali çiziyor. */
@media (prefers-reduced-motion: reduce) {
  :root { --hiz-1: 0ms; --hiz-2: 0ms; --hiz-3: 0ms; --hiz-4: 0ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}