/* ==========================================================================
   tokens.css — Turon dizayn tizimining YAGONA manbai (D0, ADR-036)
   --------------------------------------------------------------------------
   Qoidalar:
   1. Komponentlar HECH QACHON to'g'ridan-to'g'ri HEX ishlatmaydi — faqat token.
   2. Rangning yagona ta'rifi `:root` (light) ichida; dark faqat
      `[data-theme="dark"]` da QAYTA ta'riflanadi (chiqish light bilan, D5 da tugma).
   3. UI holati ranglari (success/warning/danger/info) va DARAJA ranglari
      (yashil/sariq/to'q sariq/qizil) ARALASHTIRILMAYDI: biri holat, biri ma'lumot.
   ========================================================================== */

:root {
  color-scheme: light;

  /* --- Xom palitra: sovuq neytral (urg'u tomon ozgina ko'k og'ishli) ------ */
  --c-neutral-0: #ffffff;
  --c-neutral-25: #fbfcfe;
  --c-neutral-50: #f6f8fb;
  --c-neutral-100: #eef1f6;
  --c-neutral-200: #e2e7ef;
  --c-neutral-300: #cbd3e0;
  --c-neutral-400: #9aa5b8;
  --c-neutral-500: #6b7789;
  --c-neutral-600: #4d5768;
  --c-neutral-700: #3a4353;
  --c-neutral-800: #262d3a;
  --c-neutral-900: #171d27;
  --c-neutral-950: #0e131b;

  /* --- Xom palitra: urg'u — chuqur ko'k (brend asosi 700 = #123c73) ------- */
  --c-accent-50: #eef4fc;
  --c-accent-100: #d9e6f7;
  --c-accent-200: #b6cdee;
  --c-accent-300: #86ace1;
  --c-accent-400: #5286cf;
  --c-accent-500: #2f66b5;
  --c-accent-600: #1e4e94;
  --c-accent-700: #123c73;
  --c-accent-800: #10305c;
  --c-accent-900: #0d2749;
  --c-accent-950: #081a33;

  /* --- Xom palitra: UI holati (daraja ranglaridan ATAYLAB farqli) --------- */
  --c-success-50: #e7f6ef;
  --c-success-500: #0f7a4d;
  --c-success-700: #0a5c3a;
  --c-warning-50: #fdf4e3;
  --c-warning-500: #a16207;
  --c-warning-700: #7c4a05;
  --c-danger-50: #fdecea;
  --c-danger-500: #b42318;
  --c-danger-700: #8b1a12;
  --c-info-50: #eaf1fe;
  --c-info-500: #175cd3;
  --c-info-700: #12459e;

  /* --- Daraja palitrasi (MA'LUMOT — views.py TIER_META bilan bir xil) ----- */
  --tier-green: #16a34a;
  --tier-yellow: #eab308;
  --tier-orange: #f97316;
  --tier-red: #dc2626;
  --tier-green-soft: #e8f7ee;
  --tier-yellow-soft: #fdf6dd;
  --tier-orange-soft: #fdeee0;
  --tier-red-soft: #fdeaea;
  /* Chip MATNI uchun to'qroq variant: asl daraja rangi yumshoq fon ustida AA'dan
     past chiqadi (o'lchandi: yashil 2.98). Nuqta/diagramma asl rangda qoladi. */
  --tier-green-text: #0f7a3a;
  --tier-yellow-text: #8a6100;
  --tier-orange-text: #9a4a06;
  --tier-red-text: #b42318;

  /* --- Semantik: sirtlar va matn ----------------------------------------- */
  --bg-app: var(--c-neutral-50);
  --bg-surface: var(--c-neutral-0);
  --bg-surface-raised: var(--c-neutral-0);
  --bg-subtle: var(--c-neutral-100);
  --bg-hover: var(--c-neutral-100);
  --bg-active: var(--c-neutral-200);
  --bg-inverse: var(--c-neutral-900);
  --bg-sidebar: var(--c-accent-800);
  --bg-sidebar-hover: var(--c-accent-700);
  --bg-sidebar-active: var(--c-accent-600);

  --text-strong: var(--c-neutral-900);
  --text-default: var(--c-neutral-800);
  --text-muted: var(--c-neutral-500);
  --text-subtle: var(--c-neutral-400);
  --text-inverse: var(--c-neutral-0);
  --text-accent: var(--c-accent-700);
  --text-on-sidebar: #dbe7f7;

  --border-subtle: var(--c-neutral-200);
  --border-default: var(--c-neutral-300);
  --border-strong: var(--c-neutral-400);
  --border-accent: var(--c-accent-500);

  /* --- Semantik: interaktiv (tugma / havola) ------------------------------ */
  --accent-bg: var(--c-accent-700);
  --accent-bg-hover: var(--c-accent-800);
  --accent-bg-active: var(--c-accent-900);
  --accent-soft-bg: var(--c-accent-50);
  --accent-soft-text: var(--c-accent-800);
  --accent-text: var(--c-accent-700);
  --focus-ring: var(--c-accent-500);

  /* --- Semantik: holat (fon / matn / to'ldirilgan) ------------------------ */
  --success-bg: var(--c-success-50);
  --success-text: var(--c-success-700);
  --success-solid: var(--c-success-500);
  --warning-bg: var(--c-warning-50);
  --warning-text: var(--c-warning-700);
  --warning-solid: var(--c-warning-500);
  --danger-bg: var(--c-danger-50);
  --danger-text: var(--c-danger-700);
  --danger-solid: var(--c-danger-500);
  --info-bg: var(--c-info-50);
  --info-text: var(--c-info-700);
  --info-solid: var(--c-info-500);

  /* --- Tipografika -------------------------------------------------------- */
  --font-sans: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans",
    "DejaVu Sans", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", "Segoe UI Mono",
    "DejaVu Sans Mono", monospace;

  --text-2xs: 0.75rem;   /* 12px — yordamchi matn, jadval izohi */
  --text-xs: 0.8125rem;  /* 13px — jadval katagi, badge */
  --text-sm: 0.875rem;   /* 14px — asosiy UI matni */
  --text-md: 1rem;       /* 16px — kirish maydoni, o'qish matni */
  --text-lg: 1.25rem;    /* 20px — kartochka sarlavhasi */
  --text-xl: 1.5rem;     /* 24px — sahifa sarlavhasi */
  --text-2xl: 2rem;      /* 32px — KPI raqami */
  --text-3xl: 2.5rem;    /* 40px — landing hero */

  --leading-tight: 1.2;
  --leading-snug: 1.4;
  --leading-normal: 1.55;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --tracking-wide: 0.04em;

  /* --- Oraliq: 4px panjara (8px ritm) ------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* --- Shakl --------------------------------------------------------------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --shadow-1: 0 1px 2px rgba(14, 19, 27, 0.06), 0 1px 1px rgba(14, 19, 27, 0.04);
  --shadow-2: 0 4px 12px rgba(14, 19, 27, 0.08), 0 1px 3px rgba(14, 19, 27, 0.05);
  --shadow-3: 0 16px 40px rgba(14, 19, 27, 0.16), 0 4px 12px rgba(14, 19, 27, 0.08);

  /* --- Karkas o'lchamlari (D1 app shell shulardan foydalanadi) ------------- */
  --sidebar-width: 240px;
  --sidebar-width-collapsed: 64px;
  --topbar-height: 56px;
  --content-max: 1280px;
  --prose-max: 68ch;

  /* --- Harakat -------------------------------------------------------------- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* --- Qatlamlar ------------------------------------------------------------ */
  --z-sticky: 10;
  --z-drawer: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* ==========================================================================
   Dark — faqat SEMANTIK tokenlar qayta ta'riflanadi (xom palitra o'zgarmaydi).
   Ataylab `prefers-color-scheme` bilan avtomatik yoqilmaydi: chiqish light bilan,
   almashtirgich D5 da (`<html data-theme="dark">`).
   ========================================================================== */
[data-theme="dark"] {
  color-scheme: dark;

  --bg-app: var(--c-neutral-950);
  --bg-surface: #141a24;
  --bg-surface-raised: #1a212d;
  --bg-subtle: #1f2733;
  --bg-hover: #222b38;
  --bg-active: #2b3543;
  --bg-inverse: var(--c-neutral-100);
  --bg-sidebar: #101722;
  --bg-sidebar-hover: #1a2432;
  --bg-sidebar-active: var(--c-accent-700);

  --text-strong: #f2f5fa;
  --text-default: #dde3ec;
  --text-muted: #9aa5b8;
  --text-subtle: #6b7789;
  --text-inverse: var(--c-neutral-900);
  --text-accent: var(--c-accent-300);
  --text-on-sidebar: #c3d2e8;

  --border-subtle: #263041;
  --border-default: #334052;
  --border-strong: #46566b;
  --border-accent: var(--c-accent-400);

  /* Dark'da urg'u **yorug'roq** bo'ladi: tugma matni (`--text-inverse`) to'q, shuning uchun
     fon yetarlicha yorug' bo'lmasa kontrast AA'dan pastga tushadi (o'lchandi: 500 → 2.97). */
  --accent-bg: var(--c-accent-300);
  --accent-bg-hover: var(--c-accent-200);
  --accent-bg-active: var(--c-accent-100);
  --accent-soft-bg: #14283f;
  --accent-soft-text: var(--c-accent-200);
  --accent-text: var(--c-accent-300);
  --focus-ring: var(--c-accent-300);

  --success-bg: #0d2a1e;
  --success-text: #6ee7ac;
  --success-solid: #22a06b;
  --warning-bg: #2c2106;
  --warning-text: #f5c451;
  --warning-solid: #c98a10;
  --danger-bg: #2e1211;
  --danger-text: #f79a91;
  --danger-solid: #d64236;
  --info-bg: #0f1f3d;
  --info-text: #8fb6f7;
  --info-solid: #3b7ce0;

  --tier-green-soft: #0f2a1c;
  --tier-yellow-soft: #2b2408;
  --tier-orange-soft: #2d1a0b;
  --tier-red-soft: #2e1312;
  /* Dark'da to'q fon ustida asl (yorqin) daraja rangi yetarli kontrast beradi. */
  --tier-green-text: var(--tier-green);
  --tier-yellow-text: var(--tier-yellow);
  --tier-orange-text: var(--tier-orange);
  --tier-red-text: var(--tier-red);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.45);
  --shadow-3: 0 16px 40px rgba(0, 0, 0, 0.6);
}
