/* ═══════════════════════════════════════════════════════════════════════
   BONVI DASHBOARD — DIZAYN TOKENLARI (yagona manba)
   ═══════════════════════════════════════════════════════════════════════

   NIMA UCHUN BU FAYL BOR — 2026-08-27 da o'lchangan holat:

     font-size ............ 493 e'lon,  26 XIL qiymat (9px dan 44px gacha)
     border-radius ........ 92 e'lon,   19 XIL qiymat
     bo'shliq ............. 988 qiymat, 25 XIL qadam
     qattiq hex rang ...... 118 ta,     33 xil (`#8ea3c2` yolg'iz 52 marta)
                            (`index.html` + `static/js/**`; shu fayl hisobga
                             kirmaydi — literal rangning YAGONA qonuniy uyi)
     ta'riflanmagan token .. 3 xil,      8 murojaat — JIMGINA yiqilardi
     prefers-color-scheme .. 0
     monospace shrift ...... 0          (raqam bilan ishlaydigan tizimda)
     grafik kutubxona ...... 0

   26 xil shrift o'lchami — bu shkala emas, tasodif. Ikki qo'shni karta
   11px va 11.5px bilan yozilgan bo'lsa, farqni ko'z ilg'amaydi, lekin
   tizim "tartibsiz" bo'lib turadi. Investor buni nomlay olmaydi — faqat
   his qiladi. Shkala aynan shu hissiyotni yo'q qiladi.

   QOIDA: dashboardda YANGI xom qiymat yozilmaydi. Rang, o'lcham, bo'shliq,
   radius, harakat — hammasi shu fayldagi tokendan olinadi. Qoidani odam
   emas, MEXANIZM qo'riqlaydi: `tests/test_dizayn_tokenlari_qulfi.py`.

   YUKLANISH TARTIBI: bu fayl `index.html` ning `<head>` ida, ichki
   `<style>` blokidan OLDIN keladi. Ikkalasi ham `:root` ni nishonga oladi,
   ya'ni spetsifikatsiya teng — keyingisi g'olib bo'lardi. Shuning uchun
   ichki `<style>` global tokenlarni QAYTA E'LON QILMAYDI (qulf tekshiradi).
   Modulga xos tokenlar ham (`--prv-*`) shu yerga ko'chirildi: nom modulga
   tegishli bo'lishi mumkin, LITERAL QIYMAT esa faqat shu faylda yashaydi.

   TEMA: qorong'i — standart holat (`:root`). Yorug' tema IKKI yo'l bilan
   yonadi (2026-08-28 da ulandi):
     1) OT sozlamasi — `@media (prefers-color-scheme: light)`, faqat
        `:root:not([data-bv-theme="dark"])` ga: sahifada aniq qorong'i
        tanlov turgan bo'lsa, OT uning ustidan chiqa olmaydi;
     2) aniq tanlov — `:root[data-bv-theme="light"]`: OT qorong'i bo'lsa
        ham yorug'ni yoqadi.
   Ikkala blok qiymatlari AYNAN bir xil; tenglikni qulf testi muhrlaydi.
   Ulashga to'siq bo'lgan xavf — "inline uslub rangni qattiq yozadi" —
   2026-08-27/28 auditida YECHILDI: rang tashuvchi inline uslublarning
   bari token interpolyatsiya qiladi, dashboard JS'ida xom hex 0 ta,
   rgba() literallar tint tokenlarga ko'chirildi.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── RANG: asos (qorong'i tema) ──────────────────────────────────────
     Bu 12 qiymat 2026-08-25 WCAG 2.2 AA auditida O'LCHAB tanlangan:
       muted2  5f769a -> 8096b8  (3.00 -> 4.65)
       steel   4a90d9 -> 5b9be0  (4.20 -> 4.81)
       red     e8625a -> ee6f67  (4.20 -> 4.74)
     Ranglar oilasi (ton) saqlangan, faqat yorqinlik AA chegarasiga
     ko'tarilgan. QIYMATLARNI O'ZGARTIRMANG — qulf testi har birini eng
     och fon (`--panel2`) ustida qayta hisoblaydi va 4.5 dan pastga
     tushsa yiqiladi. */
  --bg: #0d1521;
  --panel: #16233a;
  --panel2: #1b2c47;
  --line: #26395a;
  --txt: #e7eef8;
  --muted: #8ea3c2;
  --muted2: #8096b8;
  --steel: #5b9be0;
  --teal: #2dd4a7;
  --amber: #f0a848;
  --red: #ee6f67;
  --violet: #9b8cf0;

  /* Kuchli chegara — WCAG 2.2 SC 1.4.11 (3:1).
     `--line` bezak-chizig'i: `--panel2` ustida 1.21:1, ya'ni MA'NO tashiy
     olmaydi. Agar chegara yagona ajratuvchi bo'lsa (tanlangan karta, input
     ramkasi, faol tab), `--line-strong` ishlatiladi: `--panel2` ustida
     3.08:1, `--bg` ustida 4.03:1. */
  --line-strong: #5176b6;

  /* ── RANG: yuza qatlamlari ───────────────────────────────────────────
     `--panel` va `--panel2` dan tashqari kodda yana beshta yuza qattiq
     yozilgan edi. Ular tasodifiy emas — har biri aniq vazifa bajaradi,
     shuning uchun o'chirilmadi, NOMLANDI. Nomlanmagan yuza temaga
     ergashmaydi: yorug' rejimda ular qorong'i bo'lib qolardi. */
  --panel-deep: #111c2e;   /* `--panel` dan chuqurroq: gradient tubi, halqa ichi */
  --panel-lift: #22354f;   /* skeleton shimmer cho'qqisi (yuqori yorqinlik) */
  --overlay: #0a1220;      /* suzuvchi qatlam: tooltip, popover */
  --grid: #31405a;         /* grafik panjara chizig'i — sof BEZAK (1.51:1) */
  --track: #3d4a5e;        /* progress panelining to'ldirilmagan qismi */

  /* ── RANG: aksent USTIDAGI matn ──────────────────────────────────────
     WCAG 1.4.3 buzilishi shu yerda tug'iladi: yorqin aksent ustiga oq matn
     qo'yilsa (`.chip.active`: #fff / `--steel` = 2.91:1) matn o'qilmaydi.
     Bu tokenlar tema bilan QUTBINI ALMASHTIRADI: qorong'i temada aksent
     yorqin -> matn qora; yorug' temada aksent to'q -> matn oq. Aynan shu
     sabab ular literal bo'lolmaydi. */
  --on-teal: #04231b;      /* `--teal` ustida 8.79:1 */
  --on-steel: #06101d;     /* `--steel` ustida 10.08:1 */

  /* ── RANG: ma'no qatlami ─────────────────────────────────────────────
     Kod rangni EMAS, MA'NONI so'raydi. `var(--teal)` "yashil" deydi;
     `var(--d-cash)` "bu pul keldi" deydi. Ma'no o'zgarmaydi, palitra
     o'zgarishi mumkin — shuning uchun modul kodi shu qatorga bog'lanadi. */
  --d-cash: var(--teal);      /* sotildi, pul keldi */
  --d-goods: var(--steel);    /* tovar, harakatdagi zaxira */
  --d-credit: var(--violet);  /* sotildi, pul kutilmoqda */
  --d-warn: var(--amber);     /* e'tibor talab qiladi */
  --d-stuck: var(--red);      /* qotgan, kechikkan, xato */
  --d-neutral: var(--muted);  /* ma'no tashimaydigan yordamchi matn */

  /* ── RANG: grafik gradientlari ───────────────────────────────────────
     Kodda 20 ta panelcha "90deg, <chuqur ton> dan <asos ton> gacha"
     shaklida chizilgan, ya'ni panelcha chapdan o'ngga "yorishadi" — bu
     to'ldirilganlikni ko'z bilan o'qitadi. To'q uchi 13 xil literal bilan
     yozilgan edi (`#1d8f6f`, `#2a7f6f`, `#2e6ca4`, `#2d6ca7`, `#3a6b8f`,
     `#2f7fb5` ...) — ko'z ilg'amaydigan farqlar, ya'ni shkala emas, tarix.
     HLS o'lchovi ularning HAMMASI bitta oiladan ekanini ko'rsatdi
     (ton farqi <= 0.02), shu sabab beshta chuqur tonga jamlandi.
     `--orange-deep` ATAYLAB alohida: `#b25c2f` ning toni qizildan 0.047
     uzoq, ya'ni u haqiqatan boshqa rang — DSO bosqichlarida 4- va
     5-bosqichni ajratib turadi. Qo'shsak, ma'lumot yo'qolardi.

     UCHTASI YORITILDI (2026-08-27). Nomlangandan keyin ular birinchi
     marta O'LCHANDI va uchtasi WCAG 2.2 SC 1.4.11 (grafik obyekt uchun
     3:1) dan o'tmagani ma'lum bo'ldi — eng qattiq fon `--panel2` ustida:
       `--steel-deep`  #2e6ca4 -> #3479b8   2.54 -> 3.05
       `--red-deep`    #b04a45 -> #bb5752   2.61 -> 3.07
       `--orange-deep` #b25c2f -> #b55d30   2.98 -> 3.05
     Nuqson migratsiya natijasi EMAS: bu qiymatlar avval ham xuddi shu
     joyda, xom literal sifatida turgan — shunchaki hech kim o'lchamagan.
     Tuzatishda HLS fazosida faqat yorqinlik ko'tarildi: ton siljishi
     <= 0.0009, to'yinganlik farqi <= 0.0026 — ya'ni rang oilasi butunlay
     saqlandi va DSO nardbonining bosqichlari avvalgidek ajralib turadi
     (qo'shni tonlar farqi 0.037 va 0.049 — o'zgarmadi). */
  --teal-deep: #1d8f6f;
  --steel-deep: #3479b8;
  --amber-deep: #b07830;
  --orange-deep: #b55d30;
  --red-deep: #bb5752;
  --steel-soft: #4a90d9;    /* gradientning YORUG' uchi */
  --violet-soft: #b385e0;   /* ko'p chiziqli grafikda 5-chiziq */

  /* ── RANG: perevod moduli palitrasi ──────────────────────────────────
     Ilgari `index.html` ning ichki `<style>` ida turardi. Ko'chirildi:
     literal rang butun tizimda FAQAT shu faylda yashaydi — aks holda
     yorug' tema ularga yetib bormaydi. Nomlar modulga xos, qiymatlar esa
     global palitraning bir qismi. */
  --prv-uzs: #5b8ab0;       /* `--panel` ustida 4.27:1 */
  --prv-sap: var(--violet); /* qiymat `--violet` bilan bir xil edi */
  --prv-navbat: #a8b8cf;    /* `--panel` ustida 7.80:1 */
  --prv-panjara: rgba(142, 163, 194, 0.10);

  /* ── RANG: shaffof tint shkalasi ─────────────────────────────────────
     `index.html` <style> ida 40 ga yaqin rgba() literali bor edi: chip
     fonlari, ogoh-banner yuzalari, hover yuzasi, nishon konturlari —
     10 XIL alfa (.05 .. .78). Bu shkala emas, tarix. Besh qadamga
     jamlandi (eng katta siljish: .28 -> .32 va .08 -> .10):

       -1     .06  hover, jadval zebra, nozik urg'u   (.05 .06 .07 o'rniga)
       -2     .10  banner va nishon foni              (.08 .09 .10 o'rniga)
       -3     .16  chip/teg foni                      (.16 — o'zgarmadi)
       -line  .32  banner ramkasi (hairline)          (.28 .32 .35 o'rniga)
       -ring  .45  nishon/holat konturi               (.45 — o'zgarmadi)

     TO'RT literal auditdan OLDINGI palitradan qolgan drift edi:
     232,98,90 (eski --red), 74,144,217 (eski --steel), 45,212,191
     (--teal emas, ko'kroq egizagi), 143,163,194 (--muted dan 1 birlik).
     Joriy palitraga tekislandi — tint endi yonidagi to'liq rang bilan
     BIR oiladan. Yorug' temada asos ranglar to'q, shuning uchun tint
     RGB lari ham yorug' palitradan olinadi; alfa qadamlar bir xil. */
  --tint-teal-1: rgba(45, 212, 167, .06);
  --tint-teal-2: rgba(45, 212, 167, .10);
  --tint-teal-3: rgba(45, 212, 167, .16);
  --tint-teal-ring: rgba(45, 212, 167, .45);
  --tint-amber-2: rgba(240, 168, 72, .10);
  --tint-amber-3: rgba(240, 168, 72, .16);
  --tint-amber-line: rgba(240, 168, 72, .32);
  --tint-amber-ring: rgba(240, 168, 72, .45);
  --tint-red-2: rgba(238, 111, 103, .10);
  --tint-red-3: rgba(238, 111, 103, .16);
  --tint-red-line: rgba(238, 111, 103, .32);
  --tint-red-ring: rgba(238, 111, 103, .45);
  --tint-steel-1: rgba(91, 155, 224, .06);
  --tint-steel-2: rgba(91, 155, 224, .10);
  --tint-steel-3: rgba(91, 155, 224, .16);
  --tint-steel-line: rgba(91, 155, 224, .32);
  --tint-muted-1: rgba(142, 163, 194, .06);
  --tint-muted-2: rgba(142, 163, 194, .10);
  --tint-muted-3: rgba(142, 163, 194, .16);
  --tint-navbat-2: rgba(168, 184, 207, .10);
  --tint-navbat-line: rgba(168, 184, 207, .32);
  --tint-navbat-ring: rgba(168, 184, 207, .45);

  /* Suzuvchi qatlam orti (modal scrim) va holat-nuqta porlashi. Scrim
     rangi `--overlay` oilasidan; porlash alfasi .55 — nuqta 8px, mayda
     obyektda zaif alfa umuman ko'rinmay qolardi. */
  --scrim: rgba(7, 12, 20, .78);
  --glow-ok: 0 0 7px rgba(45, 212, 167, .55);
  --glow-warn: 0 0 7px rgba(240, 168, 72, .55);

  /* ── SHRIFT OILASI ───────────────────────────────────────────────────
     `--font-mono`: raqam ustuni uchun. Proporsional shriftda `1` va `7`
     turli kenglikda bo'ladi, ya'ni ikki qatordagi summa vizual
     tekislanmaydi — ko'z ustunni emas, tartibsiz zigzagni ko'radi.
     `font-variant-numeric: tabular-nums` bilan birga ishlatiladi.
     Bugun kodda monospace 0 marta, tabular-nums 493 dan 11 marta uchraydi. */
  --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, 'Cascadia Mono', 'Segoe UI Mono',
               Consolas, 'Liberation Mono', monospace;

  /* ── TIPOGRAFIK SHKALA: 26 xil -> 8 qadam ────────────────────────────
     Qadamlar ATAYLAB teng nisbatda emas. Pastda zich (1.08-1.15): dashboard
     ishi — ma'lumot zichligi, 11px va 12px orasida real farq bor va u
     kerak. Yuqorida keng (1.33-1.375): sarlavha ierarxiyasi uzoqdan ham
     o'qilishi kerak.

       --fs-1  11px  mikro-yorliq, UPPERCASE, mono  (9 / 9.5 / 10 / 10.5 / 11 o'rniga)
       --fs-2  12px  ikkilamchi matn, izoh          (11.5 / 12 o'rniga)
       --fs-3  13px  asosiy matn, jadval katagi     (12.5 / 13 / 13.5 o'rniga)
       --fs-4  15px  urg'u, karta sarlavhasi        (14 / 14.5 / 15 / 16 o'rniga)
       --fs-5  18px  bo'lim sarlavhasi              (17 / 19 / 20 o'rniga)
       --fs-6  24px  ikkilamchi KPI                 (21 / 22 / 24 / 26 o'rniga)
       --fs-7  32px  asosiy KPI                     (30 / 32 / 34 o'rniga)
       --fs-8  44px  bosh raqam                     (38 / 44 o'rniga)

     POL 11px: bugungi eng kichik qiymat 9px. 9px — o'qish emas, taxmin
     qilish. Pol ko'tarilishi 453 ta e'lonning (91.9%) bir qismini kattaroq
     qiladi; bu zichlikni biroz kamaytiradi va bu ATAYLAB. */
  --fs-1: 11px;
  --fs-2: 12px;
  --fs-3: 13px;
  --fs-4: 15px;
  --fs-5: 18px;
  --fs-6: 24px;
  --fs-7: 32px;
  --fs-8: 44px;

  /* Qator balandligi — o'lchamga emas, VAZIFAGA bog'lanadi. */
  --lh-tight: 1.15;   /* katta raqam: qatorlar orasi ochilib ketmasin */
  --lh-base: 1.5;     /* o'qiladigan matn */
  --lh-loose: 1.7;    /* uzun tavsif, ko'p qatorli izoh */

  /* ── BO'SHLIQ SHKALASI: 25 xil qadam -> 8 ────────────────────────────
     O'lchangan taqsimot (988 qiymat): 8px x154, 10px x151, 16px x131,
     6px x106, 4px x95, 14px x92, 12px x62 — birinchi yettitasi 79% ni
     qoplaydi. Shkala shu og'irlik markazlari atrofida qurilgan.

     NEGA `--sp-0` BOR (dastlab reja 8 qadam edi): 1/2/3px 54 ta joyda
     uchraydi. 54 ta "istisno" — istisno emas, NOMLANMAGAN QADAM. Uni
     shkaladan tashqarida qoldirish "poli 4px" degan yolg'onni saqlab
     turardi, 4px ga ko'tarish esa zich yorliq va jadval katagini
     shishirardi. To'g'ri javob — qadamni tan olish va nomlash.

     Shkalaga KIRMAYDIGANI ataylab: manfiy chekka (`-4px`, `-2px -5px`) —
     optik tuzatish, ritm emas; `180px` — yorliq ustunining kengligi,
     ya'ni tartib o'lchami, bo'shliq emas. Ikkalasini shkalaga tortish
     tokenning ma'nosini buzardi. */
  --sp-0: 2px;    /* zich yorliq, jadval katagi, ikki qatorli stack */
  --sp-1: 4px;    /* ikon bilan matn orasi */
  --sp-2: 6px;    /* zich element ichi */
  --sp-3: 8px;    /* standart element ichi */
  --sp-4: 12px;   /* karta ichi, qator orasi */
  --sp-5: 16px;   /* karta paddingi */
  --sp-6: 24px;   /* kartalar orasi */
  --sp-7: 32px;   /* bo'limlar orasi */
  --sp-8: 48px;   /* ekran yuqori/quyi maydoni */

  /* ── RADIUS: 19 xil -> 4 + 1 ─────────────────────────────────────────
     2/3 -> --r-xs | 4/5/6/7 -> --r-sm | 8..13 -> --r-md | 16/20 -> --r-lg

     NEGA `--r-xs` BOR (dastlab reja 4 qadam edi): radius elementga emas,
     uning O'LCHAMIGA nisbatan ishlaydi. 9x9px legenda nishoniga 6px radius
     berilsa, u kvadrat bo'lishdan to'xtaydi va dog'ga aylanadi — ya'ni
     yorliq nimani belgilayotgani o'qilmay qoladi. 3px esa zich elementlar
     uchun to'g'ri pog'ona va u ayni paytda "tabletka" holatlarini ham
     to'g'ri hal qiladi: brauzer radiusni qutining yarmiga QISADI, shuning
     uchun 4px balandlikdagi progress panelida 3px avtomatik 2px bo'ladi —
     ko'rinish o'zgarmaydi. Doira (`50%`) token emas: u nisbat, o'lcham emas. */
  --r-xs: 3px;
  /* Investor-blankasi maydonlarining eng kichik eni va so'rov-matni
     blokining chap ajratuvchisi. Bular BO'SHLIQ emas, O'LCHOV — shuning
     uchun `--sp-*` shkalasida emas, o'z nomi bilan e'lon qilinadi
     (`nasiya.js` blanka bo'limi, 2026-08-28). */
  --blanka-maydon-eni: 180px;
  --blanka-matn-chekka: 3px;

  /* Bo'limlar kesimidagi «yangi xavf» mini-yo'lagining o'lchami. Bu ham
     bo'shliq emas, O'LCHOV — jadval katagi ichidagi ko'rsatkich
     (`nasiya.js::asyBolimlarHTML`, 2026-08-28). */
  --bol-yolak-eni: 52px;
  --bol-yolak-balandligi: 5px;

  /* Portfel-trend grafigi legendasidagi rang-nishonlari. Ular ham
     bo'shliq emas, O'LCHOV: nishon chizilgan chiziq va soha bilan
     bir xil qalinlikda ko'rinishi kerak, aks holda legenda grafikni
     emas, o'zini tasvirlaydi (`nasiya.js::asyTrendHTML`, 2026-08-28). */
  --trend-nishon-eni: 14px;
  --trend-nishon-balandligi: 10px;
  --trend-nishon-chiziq: 3px;
  --trend-xulosa-chekka: 3px;

  --r-xs: 2px;    /* mikro-nishon: legenda kvadrati, ko'rsatkich yo'lagi */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 20px;
  --r-full: 999px;

  /* ── HARAKAT ─────────────────────────────────────────────────────────
     Bugun kodda 10 ta o'tish bor va 9 tasi `linear` — ya'ni harakat
     mexanik, jonsiz. Tabiiy harakat bir tekis emas: tez boshlanadi, sekin
     to'xtaydi. `--ease-out` aynan shuni beradi. `prefers-reduced-motion`
     ni `index.html` dagi mavjud qoida hal qiladi (WCAG 2.3.3). */
  --t-fast: 120ms;    /* hover, fokus — javob DARHOL sezilishi kerak */
  --t-base: 200ms;    /* holat almashuvi, ochilish */
  --t-slow: 320ms;    /* katta maydon, panel siljishi */
  --ease: cubic-bezier(.4, 0, .2, 1);       /* standart */
  --ease-out: cubic-bezier(0, 0, .2, 1);    /* kirish: sekin to'xtash */

  /* ── BALANDLIK (soya) ────────────────────────────────────────────────
     Bugun butun dashboardda 3 ta box-shadow bor, ya'ni qatlam ierarxiyasi
     yo'q: modal ham, karta ham bir tekislikda turadi. */
  --sh-1: 0 1px 2px rgba(0, 0, 0, .28);      /* karta */
  --sh-2: 0 4px 12px rgba(0, 0, 0, .38);     /* ochiluvchi ro'yxat */
  --sh-3: 0 10px 26px rgba(0, 0, 0, .55);    /* modal */

  /* ── FOKUS (WCAG 2.4.7 / 2.4.11) ─────────────────────────────────── */
  --focus-ring: 2px solid var(--steel);
  --focus-offset: 2px;

  /* Ildiz shrifti — barcha element shundan meros oladi. */
  font-family: var(--font-sans);

  /* Brauzerning O'Z bo'laklari (skrollbar, forma nazorati, focus halqasi
     ranglari) ham temaga ergashsin — busiz qorong'i sahifada OQ skrollbar
     qoladi. Yorug' bloklarda `light` ga almashadi. */
  color-scheme: dark;
}

/* ═══════════════════════════════════════════════════════════════════════
   YORUG' TEMA — 1-yo'l: OT sozlamasi (prefers-color-scheme)

   Qo'riqlagich `:not([data-bv-theme="dark"])` — sahifada aniq qorong'i
   tanlov turgan bo'lsa, OT yorug' bo'lsa ham bu blok QO'LLANMAYDI.
   CSS'da bitta e'lon blokini media chegarasi orqali ikki selektorga
   ulashib bo'lmaydi, shu sabab e'lonlar quyidagi
   `:root[data-bv-theme="light"]` blokining AYNAN nusxasi (har bir
   qiymatning asosi va o'lchovi o'sha yerdagi izohlarda). Og'ishni qulf
   testi e'lon-ma-e'lon taqqoslab yiqitadi. Manba tartibi ham ataylab:
   attr blok KEYIN keladi — ikkala selektor aniqligi teng (0,2,0),
   keyingisi g'olib, ya'ni aniq tanlov har doim so'nggi so'zni aytadi.
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: light) {
  :root:not([data-bv-theme="dark"]) {
    --bg: #eaeff7;
    --panel: #ffffff;
    --panel2: #f3f7fc;
    --line: #d6e1f0;
    --line-strong: #5f8ac4;
    --txt: #101c2e;
    --muted: #4a6485;
    --muted2: #576d8a;
    --steel: #215f9e;
    --teal: #0a795d;
    --amber: #8f5300;
    --red: #b5322b;
    --violet: #5c46c4;
    --panel-deep: #e2eaf6;
    --panel-lift: #dde7f5;
    --overlay: #ffffff;
    --grid: #c8d6e8;
    --track: #c3d0e2;
    --on-teal: #eafaf4;
    --on-steel: #eef5fd;
    --teal-deep: #06553f;
    --steel-deep: #164272;
    --amber-deep: #663b00;
    --orange-deep: #7d3311;
    --red-deep: #8a241e;
    --steel-soft: #3f7fc4;
    --violet-soft: #7a5fd0;
    --prv-uzs: #3d6a94;
    --prv-navbat: #596e8c;
    --prv-panjara: rgba(16, 28, 46, 0.06);
    --tint-teal-1: rgba(10, 121, 93, .06);
    --tint-teal-2: rgba(10, 121, 93, .10);
    --tint-teal-3: rgba(10, 121, 93, .16);
    --tint-teal-ring: rgba(10, 121, 93, .45);
    --tint-amber-2: rgba(143, 83, 0, .10);
    --tint-amber-3: rgba(143, 83, 0, .16);
    --tint-amber-line: rgba(143, 83, 0, .32);
    --tint-amber-ring: rgba(143, 83, 0, .45);
    --tint-red-2: rgba(181, 50, 43, .10);
    --tint-red-3: rgba(181, 50, 43, .16);
    --tint-red-line: rgba(181, 50, 43, .32);
    --tint-red-ring: rgba(181, 50, 43, .45);
    --tint-steel-1: rgba(33, 95, 158, .06);
    --tint-steel-2: rgba(33, 95, 158, .10);
    --tint-steel-3: rgba(33, 95, 158, .16);
    --tint-steel-line: rgba(33, 95, 158, .32);
    --tint-muted-1: rgba(74, 100, 133, .06);
    --tint-muted-2: rgba(74, 100, 133, .10);
    --tint-muted-3: rgba(74, 100, 133, .16);
    --tint-navbat-2: rgba(89, 110, 140, .10);
    --tint-navbat-line: rgba(89, 110, 140, .32);
    --tint-navbat-ring: rgba(89, 110, 140, .45);
    --scrim: rgba(16, 28, 46, .48);
    --glow-ok: 0 0 7px rgba(10, 121, 93, .45);
    --glow-warn: 0 0 7px rgba(143, 83, 0, .45);
    --sh-1: 0 1px 2px rgba(16, 28, 46, .08);
    --sh-2: 0 4px 12px rgba(16, 28, 46, .12);
    --sh-3: 0 10px 26px rgba(16, 28, 46, .18);
    color-scheme: light;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   YORUG' TEMA — 2-yo'l: aniq tanlov (`data-bv-theme="light"`)

   Qiymatlar taxmin bilan emas, QIDIRUV bilan tanlangan: har rang HLS
   fazosida ton (H) va to'yinganlik (S) saqlangan holda faqat yorqinlik (L)
   bo'yicha siljitilgan va AA chegarasidan o'tgan birinchi qadamda
   to'xtatilgan. Shu sabab yorug' palitra qorong'isining "boshqa rangi"
   emas — AYNAN o'sha rang, boshqa fonda.

   O'lchangan eng past matn kontrasti: 4.59 (`--muted2` / `--bg`).
   ═══════════════════════════════════════════════════════════════════════ */
:root[data-bv-theme="light"] {
  --bg: #eaeff7;
  --panel: #ffffff;
  --panel2: #f3f7fc;
  --line: #d6e1f0;
  --line-strong: #5f8ac4;
  --txt: #101c2e;
  --muted: #4a6485;
  --muted2: #576d8a;
  --steel: #215f9e;
  --teal: #0a795d;
  --amber: #8f5300;
  --red: #b5322b;
  --violet: #5c46c4;

  /* Yuzalar: qorong'i temada "chuqur" = QORAROQ, yorug'da = TO'QROQ, ya'ni
     ikkalasida ham asosiy paneldan ORQAGA chekinadi. Vazifa saqlanadi,
     yo'nalish emas. `--overlay` yorug'da oq bo'ladi va o'z chegarasi
     (`--line`) bilan ajraladi. */
  --panel-deep: #e2eaf6;
  --panel-lift: #dde7f5;
  --overlay: #ffffff;
  --grid: #c8d6e8;
  --track: #c3d0e2;    /* `--txt` bilan 10.95:1 */

  /* Qutb almashadi: yorug' temada aksent to'q, demak ustidagi matn OQ. */
  --on-teal: #eafaf4;  /* `--teal` (#0a795d) ustida 4.99:1 */
  --on-steel: #eef5fd; /* `--steel` (#215f9e) ustida 5.98:1 */

  /* Grafik gradientlari: yorug' temada asos ranglar allaqachon to'q,
     shuning uchun "chuqur" uchi yana bir pog'ona to'qroq olinadi —
     gradientning yo'nalishi (to'qdan asosga) o'zgarmaydi. Barchasi uchta
     yuzada ham >= 3:1 (WCAG 1.4.11): eng past 3.61 (`--steel-soft`/`--bg`). */
  --teal-deep: #06553f;
  --steel-deep: #164272;
  --amber-deep: #663b00;
  --orange-deep: #7d3311;
  --red-deep: #8a241e;
  --steel-soft: #3f7fc4;
  --violet-soft: #7a5fd0;

  /* Perevod palitrasi. `--prv-navbat` qidiruvda #5a6f8d dan #596e8c ga
     bir qadam to'qlashtirildi: #5a6f8d `--bg` ustida 4.44 bergan edi. */
  --prv-uzs: #3d6a94;    /* 4.93 / 5.69 / 5.29 */
  --prv-navbat: #596e8c; /* 4.51 / 5.21 / 4.84 */
  --prv-panjara: rgba(16, 28, 46, 0.06);

  /* Tint shkalasi: RGB — yorug' palitraning to'q ranglaridan, alfa
     qadamlari qorong'i bilan bir xil (.06/.10/.16/.32/.45). To'q rang
     oq ustida bir xil alfada biroz kuchliroq ko'rinadi — bu ataylab:
     yorug' fonda nozik tint aks holda umuman yo'qolib qolardi. */
  --tint-teal-1: rgba(10, 121, 93, .06);
  --tint-teal-2: rgba(10, 121, 93, .10);
  --tint-teal-3: rgba(10, 121, 93, .16);
  --tint-teal-ring: rgba(10, 121, 93, .45);
  --tint-amber-2: rgba(143, 83, 0, .10);
  --tint-amber-3: rgba(143, 83, 0, .16);
  --tint-amber-line: rgba(143, 83, 0, .32);
  --tint-amber-ring: rgba(143, 83, 0, .45);
  --tint-red-2: rgba(181, 50, 43, .10);
  --tint-red-3: rgba(181, 50, 43, .16);
  --tint-red-line: rgba(181, 50, 43, .32);
  --tint-red-ring: rgba(181, 50, 43, .45);
  --tint-steel-1: rgba(33, 95, 158, .06);
  --tint-steel-2: rgba(33, 95, 158, .10);
  --tint-steel-3: rgba(33, 95, 158, .16);
  --tint-steel-line: rgba(33, 95, 158, .32);
  --tint-muted-1: rgba(74, 100, 133, .06);
  --tint-muted-2: rgba(74, 100, 133, .10);
  --tint-muted-3: rgba(74, 100, 133, .16);
  --tint-navbat-2: rgba(89, 110, 140, .10);
  --tint-navbat-line: rgba(89, 110, 140, .32);
  --tint-navbat-ring: rgba(89, 110, 140, .45);

  /* Scrim yorug'da ham TO'Q qoladi: uning vazifasi ostidagi kontentni
     xiralashtirish, oq parda buni bajara olmaydi. Porlash to'q rangda
     oq fonda o'zi kuchli ko'rinadi — alfa bir pog'ona pasaytirildi. */
  --scrim: rgba(16, 28, 46, .48);
  --glow-ok: 0 0 7px rgba(10, 121, 93, .45);
  --glow-warn: 0 0 7px rgba(143, 83, 0, .45);

  /* Yorug' fonda soya boshqacha ishlaydi: qora yarim shaffof rang oq ustida
     kir bo'lib ko'rinadi. Shuning uchun ko'k-kulrang tomonga siljitilgan. */
  --sh-1: 0 1px 2px rgba(16, 28, 46, .08);
  --sh-2: 0 4px 12px rgba(16, 28, 46, .12);
  --sh-3: 0 10px 26px rgba(16, 28, 46, .18);
  color-scheme: light;
}
