/* ==========================================================================
   maisa tokens — v1.0 (2026-10-29)
   Barcha maisa panellari (FaylHub, Ertakchi, Promedia, maisa) uchun yagona
   o'zgaruvchilar. Komponentlar faqat shu o'zgaruvchilarni ishlatadi.

   Ulash:
     <html data-product="faylhub" class="">        ← yorug'
     <html data-product="faylhub" class="dark">    ← qorong'i
   ========================================================================== */

/* ---------- 1. Neytral palitra (hamma mahsulotda bir xil) ---------- */
:root {
  /* RGB uchliklar — alpha bilan ishlatish uchun: rgb(var(--mx-ink) / .5) */
  --mx-bg:        248 250 252;  /* #F8FAFC  sahifa foni (chrome)            */
  --mx-surface:   255 255 255;  /* #FFFFFF  karta, sidebar, topbar           */
  --mx-subtle:    241 245 249;  /* #F1F5F9  hover, ichki blok, progress yo'li */
  --mx-border:    226 232 240;  /* #E2E8F0  ajratuvchi chiziq, karta chegarasi */
  --mx-control:   139 149 167;  /* #8B95A7  input/checkbox chegarasi (3:1)    */
  --mx-ink:        15  23  42;  /* #0F172A  asosiy matn                       */
  --mx-muted:      71  85 105;  /* #475569  ikkinchi darajali matn            */
  --mx-faint:     100 116 139;  /* #64748B  izoh, meta, label (4.5:1+)        */

  --mx-overlay:   15 23 42;     /* drawer/modal orqa fon (alpha .55)          */
  --mx-shadow-pop: 0 12px 32px -12px rgba(15, 23, 42, .22);
  --mx-shadow-xs:  0 1px 2px rgba(15, 23, 42, .05);
}

.dark {
  --mx-bg:         12  13  16;  /* #0C0D10 */
  --mx-surface:    21  23  28;  /* #15171C */
  --mx-subtle:     30  33  39;  /* #1E2127 */
  --mx-border:     40  44  52;  /* #282C34 */
  --mx-control:    98 105 118;  /* #626976 */
  --mx-ink:       236 238 242;  /* #ECEEF2 */
  --mx-muted:     156 163 175;  /* #9CA3AF */
  --mx-faint:     139 146 160;  /* #8B92A0 */

  --mx-overlay:    0 0 0;
  --mx-shadow-pop: 0 16px 40px -12px rgba(0, 0, 0, .6);
  --mx-shadow-xs:  0 1px 2px rgba(0, 0, 0, .4);
  color-scheme: dark;
}

/* ---------- 2. Holat ranglari (aksentdan mustaqil, o'zgarmaydi) ---------- */
:root {
  --mx-ok:        #047857;  --mx-ok-bg:   #ECFDF5;  --mx-ok-bd:   #A7F3D0;
  --mx-wait:      #B45309;  --mx-wait-bg: #FFFBEB;  --mx-wait-bd: #FDE68A;
  --mx-err:       #B91C1C;  --mx-err-bg:  #FEF2F2;  --mx-err-bd:  #FECACA;
  --mx-info:      #1D4ED8;  --mx-info-bg: #EFF6FF;  --mx-info-bd: #BFDBFE;
  --mx-live:      #10B981;
}
.dark {
  --mx-ok:   #34D399;  --mx-ok-bg:   rgba(16,185,129,.12);  --mx-ok-bd:   rgba(52,211,153,.28);
  --mx-wait: #FBBF24;  --mx-wait-bg: rgba(245,158,11,.12);  --mx-wait-bd: rgba(251,191,36,.28);
  --mx-err:  #F87171;  --mx-err-bg:  rgba(239,68,68,.12);   --mx-err-bd:  rgba(248,113,113,.28);
  --mx-info: #60A5FA;  --mx-info-bg: rgba(59,130,246,.12);  --mx-info-bd: rgba(96,165,250,.28);
}

/* ---------- 3. Mahsulot aksentlari (logodan olinadi) ----------
   --mx-ac      asosiy rang: tugma, aktiv menyu, grafik 1-seriya (oq matn 4.5:1+)
   --mx-ac-txt  havola / aktiv menyu matni yorug' fonda
   --mx-ac-dk   qorong'i rejimdagi aksent (tugmada qora matn bilan)
   --mx-ac2     grafik 2-seriya (logoning ikkinchi rangi), --mx-ac2-dk qorong'ida
   --mx-ac3     grafik 3-seriya (asosiy rangning och tusi)                     */
:root, [data-product="maisa"] {
  --mx-ac: #1E7F4F; --mx-ac-txt: #186A41; --mx-ac-dk: #4CC285;
  --mx-ac2: #8DBF2E; --mx-ac2-dk: #C8F169; --mx-ac3: #72C495;
}
[data-product="faylhub"] {
  --mx-ac: #C64A12; --mx-ac-txt: #B4430F; --mx-ac-dk: #FF8A4C;
  --mx-ac2: #E89A2C; --mx-ac2-dk: #FFC266; --mx-ac3: #F2A27A;
}
[data-product="ertakchi"] {
  --mx-ac: #6D4AE0; --mx-ac-txt: #5636C4; --mx-ac-dk: #A78BFA;
  --mx-ac2: #E0A21F; --mx-ac2-dk: #F5C451; --mx-ac3: #B9A4F7;
}
[data-product="promedia"] {
  --mx-ac: #C93A22; --mx-ac-txt: #C2351F; --mx-ac-dk: #FF7A66;
  --mx-ac2: #EE8A3C; --mx-ac2-dk: #FFB577; --mx-ac3: #F5A898;
}
[data-product="codeva"] {
  --mx-ac: #0B7C8F; --mx-ac-txt: #0B7080; --mx-ac-dk: #0BA4C1;
  --mx-ac2: #6366F1; --mx-ac2-dk: #9A9BF4; --mx-ac3: #79B7C1;
}

/* Hosila (avtomatik) aksent tokenlari — qo'lda yozilmaydi */
:root, [data-product] {
  --mx-ac-on:    #FFFFFF;                                              /* tugma matni   */
  --mx-ac-fill:  var(--mx-ac);                                         /* tugma foni    */
  --mx-ac-ink:   var(--mx-ac-txt);                                     /* aksent matn   */
  --mx-ac-soft:  color-mix(in srgb, var(--mx-ac) 9%, transparent);     /* aktiv fon     */
  --mx-ac-line:  color-mix(in srgb, var(--mx-ac) 24%, transparent);    /* aktiv chegara */
  --mx-ac-chart2: var(--mx-ac2);
}
.dark, .dark [data-product], [data-product].dark {
  --mx-ac-on:    #0C0D10;
  --mx-ac-fill:  var(--mx-ac-dk);
  --mx-ac-ink:   var(--mx-ac-dk);
  --mx-ac-soft:  color-mix(in srgb, var(--mx-ac-dk) 14%, transparent);
  --mx-ac-line:  color-mix(in srgb, var(--mx-ac-dk) 30%, transparent);
  --mx-ac-chart2: var(--mx-ac2-dk);
}

/* ---------- 4. Tipografiya ---------- */
:root {
  --mx-font:      "Onest", "Segoe UI", system-ui, sans-serif;
  --mx-font-num:  "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  --mx-fs-display: 30px;  /* KPI qiymati          */
  --mx-fs-h1:      22px;  /* sahifa sarlavhasi    */
  --mx-fs-h2:      16px;  /* modal / bo'lim nomi  */
  --mx-fs-title:   12px;  /* karta sarlavhasi (UPPERCASE) */
  --mx-fs-body:    13px;  /* asosiy matn          */
  --mx-fs-small:   12px;  /* jadval meta, chip    */
  --mx-fs-micro:   11px;  /* label, izoh          */
  --mx-fs-tiny:    10px;  /* sidebar guruh nomi   */
}

/* ---------- 5. O'lchamlar (4px tizim) ---------- */
:root {
  --mx-s-1: 4px;  --mx-s-2: 8px;  --mx-s-3: 12px; --mx-s-4: 16px;
  --mx-s-5: 20px; --mx-s-6: 24px; --mx-s-7: 28px; --mx-s-8: 32px;
  --mx-s-10: 40px; --mx-s-12: 48px; --mx-s-16: 64px;

  --mx-r-xs: 6px;    /* teg, kichik belgi     */
  --mx-r-sm: 10px;   /* tugma, input, select  */
  --mx-r-md: 12px;   /* menyu ikonkasi        */
  --mx-r-lg: 16px;   /* menyu bandi, dropdown */
  --mx-r-xl: 18px;   /* karta                 */
  --mx-r-pill: 999px;

  --mx-sidebar-w: 256px;
  --mx-topbar-h:  52px;
  --mx-control-h: 36px;     /* desktop; telefonda 40px */
  --mx-page-x:    32px;     /* sahifa chetlari (xl)   */
  --mx-page-y:    24px;
  --mx-gap:       16px;     /* kartalar orasi         */
  --mx-card-p:    20px;     /* karta ichi             */
  --mx-content-max: 1600px;

  --mx-ease: cubic-bezier(.2, .7, .2, 1);
  --mx-t-fast: 150ms;
  --mx-t-base: 200ms;

  --mx-z-overlay: 30; --mx-z-drawer: 40; --mx-z-dropdown: 50; --mx-z-modal: 60; --mx-z-toast: 70;
}
@media (max-width: 1279px) { :root { --mx-page-x: 24px; } }
@media (max-width: 1023px) { :root { --mx-page-x: 20px; --mx-page-y: 20px; } }
@media (max-width: 767px)  { :root { --mx-page-x: 16px; --mx-page-y: 16px; --mx-gap: 12px; --mx-card-p: 16px; --mx-control-h: 40px; --mx-fs-display: 26px; --mx-fs-h1: 20px; } }