/* Dizayn tokenlari (ranglar, o'lchamlar) — ilgari templates/partials/tokens.html
   ichida har sahifaga inline yuborilardi. 2026-10-10 (tezlik): statik fayl,
   brauzer keshlaydi. Kompaniya rangi (accounts/themes.py) partials/theme.html
   da inline qoladi va shu fayldan KEYIN keladi — uni ustidan yozadi. */
  :root {
    /* ---- Surfaces (light content canvas) ----
       Canvas oq kartalardan sezilarli darajada to'qroq bo'lishi kerak,
       aks holda panellar fonga singib ketadi va "tekis" ko'rinadi. */
    --canvas: #E9EEF6;
    --surface: #FFFFFF;
    --surface-2: #F6F9FC;
    --surface-3: #EBF0F7;
    --border: #DFE6EF;
    --border-strong: #C6D0DE;

    /* ---- Navigation rail (dark) ---- */
    --rail: #0F1723;
    --rail-2: #17222F;
    --rail-3: #1E2B3B;
    --rail-border: #23303F;
    --rail-text: #8FA0B4;
    --rail-text-strong: #E6EDF5;

    /* ---- Text ---- */
    --text: #0F172A;
    --text-dim: #5A6B80;
    /* #94A3B8 edi — oq fonda 2.8:1, WCAG AA dan past. 4.0:1 ga ko'tarildi. */
    --text-faint: #6F8095;

    /* ---- Accents ---- */
    --primary: #0D9488;
    --primary-rgb: 13, 148, 136;
    --primary-hover: #0F766E;
    --primary-active: #115E59;
    --primary-soft: #E6FAF6;
    --primary-line: #99E6DA;
    --primary-ink: #0B6259;
    /* Jadval qatori ustiga olib borilganda ishlatiladigan yengil teal */
    --primary-wash: #E8F7F3;
    /* 2026-09-16dagi dizayn ko'rigi, 1-bosqich — ikkalasi ham ALLAQACHON
       ishlatilardi, lekin qotirilgan qiymat sifatida.
       `--primary-top`: teal gradientning ochiq uchi. Olti joyda
       qo'lda `#12A597` deb yozilgan edi (theme.html ning o'zida ikki
       marta), ya'ni brend rangini o'zgartirish olti faylni qidirishni
       talab qilardi.
       `--on-primary`: teal yuza USTIDAGI matn/ikonka rangi. Bu
       ATAYLAB ikkala rejimda ham oq: `--primary` qorong'i rejimda
       o'zgarmaydi (tepaga qarang), shuning uchun uning ustidagi matn
       ham o'zgarmasligi kerak. Tokendan olinishi esa muhim — aks holda
       `#fff` bilan `--surface` chalkashtirilib yuboriladi. */
    --primary-top: #12A597;
    --on-primary: #FFFFFF;
    /* 2026-09-30dagi so'rov: yon panel (rail) HAR DOIM to'q, lekin
       undagi faol bo'lim belgisi/chizig'i kompaniya tanlagan urg'u
       rangini aks ettirishi kerak — shu ikkita token shu uchun (qarang
       accounts/themes.py, partials/theme.html'dagi override). Standart
       qiymat — joriy teal ohangning to'q panelda yorqin ko'rinadigan
       versiyasi (ilgari #7FE9DA/#14B8A6 kabi bir necha joyda qo'lda
       qaytarilgan edi). */
    --rail-accent: #7FE9DA;
    --rail-accent-rgb: 127, 233, 218;

    --secondary: #F59E0B;
    --secondary-soft: #FEF5E1;
    --secondary-line: #F3D9A4;
    --secondary-ink: #92600A;

    /* ---- Semantic ---- */
    --ok: #047857;
    --ok-soft: #E4F6EE;
    --ok-line: #A7DCC6;

    --warn: #B45309;
    --warn-soft: #FDF3E3;
    --warn-line: #F0CE96;

    --bad: #C6303B;
    --bad-soft: #FDECEC;
    --bad-line: #F2B4B4;

    /* 2026-09-17dagi dizayn ko'rigi, C3.
       Tugma gradientlarining UCHLARI. Ilgari to'rt joyda qo'lda
       yozilgan edi (`theme.html` da `.btn-danger` va
       `button[type="submit"].btn-danger` uchun ikki martadan) — ya'ni
       qizil tugmaning ohangini o'zgartirish to'rtta qidiruv talab
       qilardi. `--primary-top` bilan bir xil naqsh.

       DIQQAT: `--bad-bottom` qiymati `--bad-text` bilan BIR XIL
       (#A82530), lekin bu TASODIF. `--bad-text` qorong'i rejimda
       yorug'lashadi (#F87171), gradient uchi esa yorug'lashmasligi
       kerak: tugma ustidagi matn ikkala rejimda ham oq, yorug' qizil
       uch esa uni o'qilmas qilib qo'yardi. Shuning uchun ular alohida
       token — birini ikkinchisiga almashtirmang. */
    --bad-top: #D9424D;
    --bad-bottom: #A82530;

    /* 2026-09-12dagi so'rov bilan kelgan yashil "Saqlash"/"Yetkazdim"
       ohangi. `--ok` (#047857) EMAS — u yumshoq fonlar uchun to'q
       yashil; bu esa tugma yuzasi. Uch joyda nusxalangan edi
       (`theme.html` da ikki marta, `worker_hauling_trip_active.html`
       dagi `.haul-finish-btn` da bir marta). Gradient uchlari, xuddi
       `--bad-top` kabi, qorong'i rejimda o'zgarmaydi. */
    --save-top: #22C55E;
    --save: #16A34A;
    --save-hover-top: #1EA34E;
    --save-hover: #15803D;

    --info: #2563EB;
    --info-soft: #E8EFFE;
    --info-line: #B4CBF7;

    --neutral-soft: #EEF2F7;
    --neutral-ink: #5A6B80;

    /* Yumshoq fon ustidagi matn rangi — qorong'i rejimda yorug'lashadi */
    --ok-text: #04624A;
    --warn-text: #8A3F07;
    --bad-text: #A82530;
    --info-text: #1D4ED8;

    /* Havola rangi — yorug'da to'q teal, qorong'ida yorug' teal */
    --link: #0F766E;
    --link-hover: #115E59;

    /* ---- Component surfaces ---- */
    --topbar-bg: rgba(255,255,255,0.86);
    --row-alt: #F7FAFD;
    --th-text: #47586D;
    --border-hover: #B6C2D2;
    --select-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%235A6B80' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");

    /* ---- Elevation ----
       Har bir daraja: qisqa "kontakt" soyasi + keng tarqalgan soya.
       Shu ikkilik nozik chuqurlik beradi, kulrang xiralik emas. */
    --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
    --shadow-sm: 0 1px 2px rgba(15,23,42,0.05), 0 3px 8px rgba(15,23,42,0.07);
    --shadow-md: 0 2px 4px rgba(15,23,42,0.05), 0 10px 24px rgba(15,23,42,0.11);
    --shadow-lg: 0 6px 12px rgba(15,23,42,0.07), 0 24px 56px rgba(15,23,42,0.17);
    /* 2026-08-27dagi so'rov ("kartochkalar tekis ko'rinadi"): stat-card
       uchun shadow-sm'dan biroz chuqurroq — tinch holatda ham kartochka
       sahifadan "ko'tarilib" turishi kerak, faqat hover'da emas. */
    --shadow-card: 0 1px 3px rgba(15,23,42,0.07), 0 8px 20px rgba(15,23,42,0.09);
    --shadow-inset: inset 0 1px 2px rgba(15,23,42,0.05);
    --ring: 0 0 0 3px rgba(13,148,136,0.18);
    --ring-bad: 0 0 0 3px rgba(198,48,59,0.18);
    /* Qorong'i railda fokus halqasi ko'rinishi uchun yorqinroq teal */
    --ring-rail: 0 0 0 2px rgba(45,212,191,0.55);

    /* ---- Motion ---- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --t-fast: 140ms;
    --t: 220ms;

    /* ---- Rhythm ----
       Barcha margin/padding/gap 4px karralisi bo'lishi kerak.
       Faqat 6px yarim-pog'ona sifatida juda tor inline gap'larda ruxsat etiladi
       (badge ichidagi nuqta, row-actions), boshqa joyda 4/8/12/16/20/24/32 ishlatiladi. */
    --gutter: 20px;  /* panel/jadval/ro'yxat ichidagi gorizontal chekka */
    --gap: 16px;     /* grid oralig'i va panellar orasidagi vertikal ritm */

    /* ---- Control sizing ----
       Yonma-yon turadigan hamma narsa (tugma, input, select) bir xil
       balandlikda bo'lishi shart, aks holda filtr qatorlari tekislanmaydi.

       2026-09-15dagi o'lchov (haqiqiy brauzer, 25 ta direktor sahifasi):
       boshqaruvlar 13 XIL balandlikda edi — 26 / 26.4 / 30.8 / 32 / 36 /
       36.9 / 37.5 / 40 / 40.3 / 42.3 / 42.6 / 55.8 / 60. Ularning
       ko'pchiligi tanlangan qiymat emas, TASODIF: komponent `min-height`
       ni nolga tushirib, balandlikni chekka + qator balandligiga
       qoldirgan va natija shrift o'lchamiga qarab suzib yurgan.

       ENDI UCHTA POG'ONA BOR, uchalasi ham ataylab:

         --control-h       40px  forma boshqaruvlari: input, select,
                                 asosiy tugma, filtr qatori. Bir qatorda
                                 turadigan hamma narsa shu o'lchamda.
         --control-h-sm    32px  ixcham boshqaruvlar: jadval qatoridagi
                                 amal tugmalari, chip, segment tugmasi.
         --control-h-icon  36px  topbar'dagi kvadrat ikonka tugmalari
                                 (.bell, .theme-toggle, .lang-mini-btn,
                                 .logout-mini-btn, .avatar). Bular forma
                                 boshqaruvi YONIDA turmaydi, o'zaro
                                 guruh — shuning uchun alohida pog'ona.
                                 400px dan tor ekranda 30px ga tushadi.

       Ishchi paneli (.worker-app) uchalasini ham 44px ga ko'taradi —
       qo'lqopdagi barmoq uchun; `verify_ishchi_paneli_barmoq.py`
       buni qo'riqlaydi.

       YANGI KOMPONENT YOZGANDA: `min-height: 0` yozib, balandlikni
       chekkaga qoldirmang — yuqoridagi uchtadan birini tanlang. */
    --control-h: 40px;
    --control-h-sm: 32px;
    --control-h-icon: 36px;

    /* ---- Shape ----
       Radius element o'lchamiga mutanosib bo'lsin: kichik tugma katta karta
       bilan bir xil radiusda bo'lsa, nisbatan yumaloqroq ko'rinadi. */
    --r-xs: 4px;     /* mayda belgilar: swatch, scrollbar */
    --r-sm: 8px;     /* kichik boshqaruvlar: btn-sm, btn-ghost, chip */
    --r-md: 10px;    /* standart boshqaruvlar: btn, input, 36–40px ikonka */
    --r-lg: 14px;    /* kartalar va panellar */
    --r-xl: 20px;    /* eng katta konteynerlar: panel-card */
    --r-pill: 999px;

    /* ---- Type ---- */
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
    --font-display: 'Inter', -apple-system, sans-serif;

    /* ---- Legacy aliases (kept so any stray inline style still resolves) ---- */
    --bg: #F4F6FA;
    --panel: #FFFFFF;
    --panel-2: #F8FAFC;
    --accent: #0D9488;
    --accent-dim: rgba(13,148,136,0.10);
    --green: #047857;
    --green-dim: #E4F6EE;
    --red: #C6303B;
    --red-dim: #FDECEC;
    --yellow: #B45309;
    --yellow-dim: #FDF3E3;
  }

  /* ---- Qorong'i rejim (dark mode) — foydalanuvchi tanlaganda <html data-theme="dark"> qo'llaniladi ---- */
  [data-theme="dark"] {
    /* 2026-08-28dagi 8-bosqich (vizual yangilanish, Yo'nalish D): qorong'i
       rejim fon ranglari ko'k-kulrangdan (#10161F) teal tusiga o'tkazildi
       — asosiy teal aksent bilan uyg'unroq, "charcoal" hissi kuchayadi. */
    --canvas: #0F1917;
    --surface: #152321;
    --surface-2: #1A2C29;
    --surface-3: #1F3330;
    --border: #274541;
    --border-strong: #33564F;

    --rail: #081412;
    --rail-2: #0F1917;
    --rail-3: #142522;
    --rail-border: #1B2E2A;

    --text: #E7ECF3;
    --text-dim: #9AACC0;
    --text-faint: #6B7C90;

    --primary-soft: rgba(13,148,136,0.16);
    --primary-line: rgba(13,148,136,0.4);
    /* Yumshoq teal fon qorong'i, shuning uchun "ink" yorug' bo'lishi shart */
    --primary-ink: #5EEAD4;
    --primary-wash: rgba(13,148,136,0.10);

    --secondary-soft: rgba(245,158,11,0.14);
    --secondary-line: rgba(245,158,11,0.34);
    --secondary-ink: #FCD34D;

    --ok-soft: rgba(4,120,87,0.16);
    --ok-line: rgba(4,120,87,0.4);

    --warn-soft: rgba(180,83,9,0.16);
    --warn-line: rgba(180,83,9,0.4);

    --bad-soft: rgba(198,48,59,0.16);
    --bad-line: rgba(198,48,59,0.4);

    --info-soft: rgba(37,99,235,0.16);
    --info-line: rgba(37,99,235,0.4);

    --neutral-soft: #232D3A;
    --neutral-ink: #9AACC0;

    --ok-text: #34D399;
    --warn-text: #FBBF24;
    --bad-text: #F87171;
    --info-text: #93B4FC;

    --link: #5EEAD4;
    --link-hover: #99F6E4;

    --topbar-bg: rgba(23,31,42,0.86);
    --row-alt: #1B2430;
    --th-text: #9AACC0;
    --border-hover: #4A5A6E;
    --select-caret: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%239AACC0' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");

    --shadow-xs: 0 1px 1px rgba(0,0,0,0.28), 0 1px 2px rgba(0,0,0,0.24);
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 4px rgba(0,0,0,0.3), 0 8px 20px rgba(0,0,0,0.42);
    --shadow-lg: 0 4px 8px rgba(0,0,0,0.35), 0 20px 44px rgba(0,0,0,0.52);
    --shadow-card: 0 1px 3px rgba(0,0,0,0.32), 0 10px 26px rgba(0,0,0,0.4);
    --shadow-inset: inset 0 1px 2px rgba(0,0,0,0.3);

    --bg: #10161F;
    --panel: #171F2A;
    --panel-2: #1C2530;
  }