/* ═══════════════════════════════════════════════════════════════════
   AvtoPay Business — dizayn tokenlari
   ═══════════════════════════════════════════════════════════════════

   YAGONA manba. Boshqa CSS fayllarda qattiq yozilgan rang, o'lcham,
   radius yoki z-index BO'LMASIN — hammasi shu yerdagi var() orqali.

   Tuzilishi:
     1. O'lchov shkalalari (tema'ga bog'liq emas)
     2. Yorug' tema — bare :root
     3. Qorong'i tema — @media + [data-theme="dark"]
     4. Doimiy (tema almashganda o'zgarmaydigan) qiymatlar

   ⚠️ Qorong'i temaga rang qo'shsang, uni MAJBURAN uch joyda e'lon qil:
      :root (yorug') → @media(dark) → [data-theme=dark].
      Faqat media ichida e'lon qilingan rang tema tugmasida ishlamaydi.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── 1. Bo'shliq — 4px shkala ──────────────────────────────── */
  --sp-0: 0;
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 20px;
  --sp-8: 24px;
  --sp-9: 32px;
  --sp-10: 40px;
  --sp-11: 48px;
  --sp-12: 64px;
  --sp-13: 80px;

  /* ── Radius ─────────────────────────────────────────────────── */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-full: 999px;

  /* ── Tipografiya ────────────────────────────────────────────
     Inter self-host qilinadi (CSP `default-src 'self'` tashqi CDN'ni
     bloklaydi). Yuklanmasa system-ui ga tushadi — o'lchamlar ikkalasida
     ham mos kelsin uchun shkala butun piksellarda. */
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* PUL VA IDENTIFIKATOR — har doim mono.
     Summalar bir o'qqa tekislanadi, 0/O va 1/l chalkashmaydi. Bu
     mahsulotning asosiy vizual belgisi: sahifa chek/ko'chirma
     ko'rinishini oladi. */
  --font-num: var(--font-mono);

  --fs-10: 10px;   /* faqat mayda yorliq/belgi */
  --fs-11: 11px;   /* jadval sarlavhasi, pill */
  --fs-12: 12px;   /* yordamchi matn */
  --fs-13: 13px;   /* ikkilamchi matn, jadval katagi */
  --fs-14: 14px;   /* asosiy matn — BAZA */
  --fs-16: 16px;   /* yirikroq matn, input */
  --fs-18: 18px;   /* kichik sarlavha */
  --fs-20: 20px;   /* h3 */
  --fs-24: 24px;   /* h2 */
  --fs-30: 30px;   /* h1 */
  --fs-38: 38px;   /* ko'rsatkich raqami */
  --fs-48: 48px;   /* asosiy summa */

  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-normal: 1.5;
  --lh-loose: 1.65;

  --ls-tight: -0.02em;   /* yirik sarlavha va summalar */
  --ls-normal: 0;
  --ls-wide: 0.06em;     /* KATTA HARFLI mayda yorliqlar */

  /* ── z-index shkalasi ───────────────────────────────────────── */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-veil: 300;
  --z-drawer: 310;
  --z-modal: 400;
  --z-toast: 500;

  /* ── Harakat ────────────────────────────────────────────────── */
  --t-fast: 120ms cubic-bezier(.4, 0, .2, 1);
  --t-base: 180ms cubic-bezier(.4, 0, .2, 1);
  --t-slow: 320ms cubic-bezier(.4, 0, .2, 1);
  --t-spring: 480ms cubic-bezier(.22, 1, .36, 1);

  /* ── Qobiq o'lchamlari ──────────────────────────────────────── */
  --sb-w: 68px;         /* yig'ilgan yon tasma */
  --sb-w-open: 260px;   /* ochilgan */
  --topbar-h: 60px;
  --content-max: 1240px;

  /* ═══════════════════════════════════════════════════════════
     2. YORUG' TEMA
     ═══════════════════════════════════════════════════════════ */

  /* Fon qatlamlari: page < surface < raised */
  --c-page: #f4f6f9;
  --c-surface: #ffffff;
  --c-surface-2: #f7f9fc;
  --c-surface-3: #eef1f6;
  --c-raised: #ffffff;

  /* Chegaralar */
  --c-line: #e3e7ee;         /* asosiy hairline */
  --c-line-soft: #edf0f5;    /* jadval ichidagi ajratgich */
  --c-line-strong: #cbd2df;  /* input, faol chegara */

  /* Matn */
  --c-text: #0f1425;
  --c-text-2: #59637a;
  --c-text-3: #8892a6;
  --c-text-on-dark: #ffffff;

  /* Brend — oltin (logodan olingan) */
  --c-gold: #e1a004;
  --c-gold-hover: #c98d02;
  --c-gold-soft: #fdf3dc;
  --c-gold-line: #f2dcab;
  --c-on-gold: #1a1200;

  /* Brend — navy (logodan olingan) */
  --c-navy: #0f1632;
  --c-navy-2: #1a2447;
  --c-navy-3: #26325c;

  /* Asosiy amal tugmasi */
  --c-primary: #0f1632;
  --c-primary-hover: #1c2748;
  --c-on-primary: #ffffff;

  /* Semantik — muvaffaqiyat */
  --c-ok: #0d8b50;
  --c-ok-strong: #0a6f40;
  --c-ok-bg: #e9f7ef;
  --c-ok-line: #b4e2c8;

  /* Semantik — xato */
  --c-err: #c62a44;
  --c-err-strong: #a11f36;
  --c-err-bg: #fdf0f2;
  --c-err-line: #f4c4ce;

  /* Semantik — ogohlantirish */
  --c-warn: #a06a06;
  --c-warn-strong: #82560a;
  --c-warn-bg: #fdf5e6;
  --c-warn-line: #f0dcae;

  /* Semantik — ma'lumot */
  --c-info: #1e5cc0;
  --c-info-strong: #17489a;
  --c-info-bg: #eaf1fd;
  --c-info-line: #c4d8f8;

  /* Neytral holat (kutilmoqda, o'chirilgan) */
  --c-mute: #6b7488;
  --c-mute-bg: #f0f2f6;
  --c-mute-line: #dde2ea;

  /* To'q panel (dashboard jonli bloki, kod qutilari) —
     yorug' temada ham TO'Q qoladi, shuning uchun alohida token */
  --c-dark-panel: #0f1632;
  --c-dark-panel-2: #17203f;
  --c-dark-text: #eef1f9;
  --c-dark-text-2: #a3b0cf;
  --c-dark-text-3: #7382a6;
  --c-dark-line: #26325c;

  /* Fokus halqasi — klaviatura bilan yurish ko'rinsin */
  --c-focus: #2f6df0;
  --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-focus) 32%, transparent);

  /* Soyalar */
  --sh-xs: 0 1px 2px rgba(15, 22, 50, .06);
  --sh-sm: 0 1px 3px rgba(15, 22, 50, .07), 0 1px 2px rgba(15, 22, 50, .04);
  --sh-md: 0 4px 12px rgba(15, 22, 50, .08), 0 1px 3px rgba(15, 22, 50, .05);
  --sh-lg: 0 12px 32px rgba(15, 22, 50, .12), 0 2px 8px rgba(15, 22, 50, .06);
  --sh-xl: 0 24px 60px rgba(15, 22, 50, .16), 0 4px 12px rgba(15, 22, 50, .08);

  /* Grafik ranglari (dashboard) */
  --c-chart-line: #e1a004;
  --c-chart-fill-1: color-mix(in srgb, var(--c-gold) 26%, transparent);
  --c-chart-fill-2: color-mix(in srgb, var(--c-gold) 0%, transparent);
  --c-chart-grid: #e8ebf1;

  color-scheme: light;
}

/* ═══════════════════════════════════════════════════════════════
   3. QORONG'I TEMA
   Ikki marta e'lon qilinadi: sistema sozlamasi uchun (media) va
   tema tugmasi uchun ([data-theme]). Media bloki [data-theme="light"]
   bilan qulflangan — foydalanuvchi yorug'ni tanlasa, sistema qorong'i
   bo'lsa ham yorug' qoladi.
   ═══════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-page: #080c17;
    --c-surface: #111828;
    --c-surface-2: #161f33;
    --c-surface-3: #1c2740;
    --c-raised: #17203a;

    --c-line: #232f4c;
    --c-line-soft: #1b2439;
    --c-line-strong: #33436b;

    --c-text: #e9edf7;
    --c-text-2: #9dabc8;
    --c-text-3: #6e7d9d;
    --c-text-on-dark: #ffffff;

    --c-gold: #f0b62a;
    --c-gold-hover: #ffc846;
    --c-gold-soft: #2a2110;
    --c-gold-line: #4a3a15;
    --c-on-gold: #1a1200;

    --c-navy: #0b1120;
    --c-navy-2: #111a2f;
    --c-navy-3: #1b2744;

    /* Qorong'ida navy tugma ko'rinmaydi — oltin asosiy amalga o'tadi */
    --c-primary: #f0b62a;
    --c-primary-hover: #ffc846;
    --c-on-primary: #1a1200;

    --c-ok: #35c77c;
    --c-ok-strong: #57d996;
    --c-ok-bg: #0e2a1d;
    --c-ok-line: #1d4a33;

    --c-err: #f8718a;
    --c-err-strong: #ff8fa3;
    --c-err-bg: #2c1119;
    --c-err-line: #58202e;

    --c-warn: #e8b14c;
    --c-warn-strong: #f5c469;
    --c-warn-bg: #2a2010;
    --c-warn-line: #4d3a19;

    --c-info: #6aa6ff;
    --c-info-strong: #8dbcff;
    --c-info-bg: #101f39;
    --c-info-line: #22375f;

    --c-mute: #8593b0;
    --c-mute-bg: #1a2338;
    --c-mute-line: #2a3652;

    /* Qorong'ida "to'q panel" fondan AJRALIB turishi kerak —
       shuning uchun u yorug'lashadi, qorayishmaydi */
    --c-dark-panel: #17223d;
    --c-dark-panel-2: #1f2c4d;
    --c-dark-text: #eef1f9;
    --c-dark-text-2: #a3b0cf;
    --c-dark-text-3: #7382a6;
    --c-dark-line: #2c3a60;

    --c-focus: #5b8cff;

    --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
    --sh-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
    --sh-lg: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
    --sh-xl: 0 28px 64px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45);

    --c-chart-line: #f0b62a;
    --c-chart-grid: #202b45;

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --c-page: #080c17;
  --c-surface: #111828;
  --c-surface-2: #161f33;
  --c-surface-3: #1c2740;
  --c-raised: #17203a;

  --c-line: #232f4c;
  --c-line-soft: #1b2439;
  --c-line-strong: #33436b;

  --c-text: #e9edf7;
  --c-text-2: #9dabc8;
  --c-text-3: #6e7d9d;
  --c-text-on-dark: #ffffff;

  --c-gold: #f0b62a;
  --c-gold-hover: #ffc846;
  --c-gold-soft: #2a2110;
  --c-gold-line: #4a3a15;
  --c-on-gold: #1a1200;

  --c-navy: #0b1120;
  --c-navy-2: #111a2f;
  --c-navy-3: #1b2744;

  --c-primary: #f0b62a;
  --c-primary-hover: #ffc846;
  --c-on-primary: #1a1200;

  --c-ok: #35c77c;
  --c-ok-strong: #57d996;
  --c-ok-bg: #0e2a1d;
  --c-ok-line: #1d4a33;

  --c-err: #f8718a;
  --c-err-strong: #ff8fa3;
  --c-err-bg: #2c1119;
  --c-err-line: #58202e;

  --c-warn: #e8b14c;
  --c-warn-strong: #f5c469;
  --c-warn-bg: #2a2010;
  --c-warn-line: #4d3a19;

  --c-info: #6aa6ff;
  --c-info-strong: #8dbcff;
  --c-info-bg: #101f39;
  --c-info-line: #22375f;

  --c-mute: #8593b0;
  --c-mute-bg: #1a2338;
  --c-mute-line: #2a3652;

  --c-dark-panel: #17223d;
  --c-dark-panel-2: #1f2c4d;
  --c-dark-text: #eef1f9;
  --c-dark-text-2: #a3b0cf;
  --c-dark-text-3: #7382a6;
  --c-dark-line: #2c3a60;

  --c-focus: #5b8cff;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --sh-sm: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .3);
  --sh-md: 0 4px 14px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35);
  --sh-lg: 0 14px 36px rgba(0, 0, 0, .55), 0 2px 8px rgba(0, 0, 0, .4);
  --sh-xl: 0 28px 64px rgba(0, 0, 0, .6), 0 4px 12px rgba(0, 0, 0, .45);

  --c-chart-line: #f0b62a;
  --c-chart-grid: #202b45;

  color-scheme: dark;
}