/* ============================================================================
   semantic.css — LOYIHANING YAGONA RANG MANBAI
   ----------------------------------------------------------------------------
   Yangi rang yoki yangi mavzu qo'shmoqchi bo'lsangiz — FAQAT shu faylni
   tahrirlang. Komponent CSS (app.css) hech qachon literal hex ishlatmaydi,
   faqat quyidagi --color-* semantik tokenlarni o'qiydi.

   Uch qatlam:
     1. PALETTE   — xom hex qiymatlar, mavzudan qat'i nazar bir xil.
     2. SEMANTIC  — --color-* tokenlar, har mavzu uchun alohida blok.
     3. CONTROL   — tugma/input kabi komponentlarning nozik sozlangan
                    tokenlari (2-bosqichda --color-* ga yig'iladi).

   Yuklash tartibi (index.html): semantic.css -> components.css -> app.css
   ============================================================================ */

/* ============ 1. PALETTE — mavzudan qat'i nazar ============ */
:root {
  /* Yashil oila (dark mavzu asosi + brend) */
  --p-green-100: #d7f5df;
  --p-green-200: #b8e0c6;
  --p-green-300: #a9d9ba;
  --p-green-400: #5eeba0;
  --p-green-500: #35d07f;
  --p-green-600: #29b76c;
  --p-green-muted: #7fae8e;

  /* Terrakota oila (light mavzu accenti) */
  --p-terra-400: #d99a6c;
  --p-terra-500: #b45f3a;
  --p-terra-600: #954a2a;

  /* Neytrallar */
  --p-ink: #2a2620;
  --p-cream: #fff8f0;
  --p-void: #0c0f0c;

  /* Brend belgisi rangi — hech qaysi mavzuda override qilinmaydi.
     Logo va "Req" wordmark shu tokenlar orqali (qarang ui-foundation.js). */
  --brand: #23c26e;
  --brand-2: #5eeba0;
  --color-brand: var(--brand);
  --color-brand-2: var(--brand-2);
}

/* ============ 2. SEMANTIC — DARK (default mavzu, atributsiz) ============ */
:root {
  /* Fon va sirtlar — sovuq neytral (status page uslubi). Yashil faqat
     accent (primary/brand), sirt/matn/chegara neytral kulrang. */
  --color-bg: #0d1014;
  --color-surface: #161b21;
  --color-surface-2: #1d232b;
  --color-surface-3: #262d36;
  --color-surface-sunken: #0f1318;

  /* Matn ierarxiyasi — neytral sovuq oq/kulrang */
  --color-text: #e8ecf0;
  --color-text-secondary: #c2cad4;
  --color-text-muted: #8b96a3;

  /* Asosiy (primary) — yashil accent qoladi */
  --color-primary: var(--p-green-500);
  --color-primary-hover: var(--p-green-600);
  --color-primary-2: var(--p-green-400);
  --color-primary-fg: #08110b;

  /* Chegaralar — neytral */
  --color-border: #242a32;
  --color-border-strong: #333c46;

  /* Tanlangan/faol qator yoki element foni (drag-over, cmdk tanlov,
     method-chip.active, autocomplete tanlov) */
  --color-selected-bg: #1a2b22;

  /* Fokus halqasi */
  --color-focus-ring: var(--p-green-500);

  /* Holat ranglari */
  --color-success: #34c759; --color-success-bg: rgba(52, 199, 89, 0.15); --color-success-border: #2a4a34;
  --color-danger: #ff6b6b; --color-danger-bg: rgba(255, 107, 107, 0.12); --color-danger-border: #6a3232;
  --color-warning: #ff9f0a; --color-warning-bg: rgba(255, 159, 10, 0.15); --color-warning-border: #6a4a1a;
  --color-info: #4f6df5; --color-info-bg: rgba(79, 109, 245, 0.15); --color-info-border: #2a3a6a;
}

/* DARK — komponent-darajali nozik sozlangan tokenlar.
   2-bosqich: iloji boricha --color-* ga yig'ish. */
:root {
  --ctl-bg: #1d232b; --ctl-border: #333c46; --ctl-fg: #e8ecf0; --ctl-hover-bg: #262d36;
  --ctl-ghost-border: #333c46; --ctl-ghost-fg: #b2bcc7; --ctl-ghost-hover-bg: #1d232b; --ctl-ghost-hover-fg: #e8ecf0;
  --ctl-danger-bg: #2e1414; --ctl-danger-border: #7a3030; --ctl-danger-fg: #f0a0a0;
  --ctl-vsave-bg: #16301f; --ctl-vsave-border: #2a4a35; --ctl-vsave-fg: #5eeba0; --ctl-vsave-hover-bg: #1c3c28;
  --ctl-icon-border: #333c46;
  --modal-x-color: #8b96a3; --modal-x-hover-color: #f0a0a0; --modal-x-hover-bg: #2e1414;
}

/* ============ 2. SEMANTIC — LIGHT ============ */
:root[data-theme="light"] {
  /* Sovuq neytral light — status page uslubi (bg #f7f8fa / surface #fff /
     border #e7eaee / ink #161c24). Primary yashil. */
  --color-bg: #f7f8fa;
  --color-surface: #ffffff;
  --color-surface-2: #f2f4f6;
  --color-surface-3: #e9ecef;
  --color-surface-sunken: #0e170f;   /* hozircha light'da override qilinmaydi */

  --color-text: #161c24;
  --color-text-secondary: #3d4652;
  --color-text-muted: #616b78;

  --color-primary: #12905a;
  --color-primary-hover: #0f7c4d;
  --color-primary-2: #1aa568;
  --color-primary-fg: #ffffff;

  --color-border: #e7eaee;
  --color-border-strong: #d8dde3;
  --color-selected-bg: #e8f3ee;

  --color-focus-ring: #12905a;

  --color-success: #12905a; --color-success-bg: #e4f4ec; --color-success-border: #b8e2cd;
  --color-danger: #d23b3b; --color-danger-bg: #fdeaea; --color-danger-border: #f4bcbc;
  --color-warning: #b9760a; --color-warning-bg: #fbf0e1; --color-warning-border: #eecfa5;
  --color-info: #3b6fe0; --color-info-bg: #eaf0fc; --color-info-border: #c6d6f7;
}
:root[data-theme="light"] {
  --ctl-bg: #f2f4f6; --ctl-border: #d8dde3; --ctl-fg: #161c24; --ctl-hover-bg: #e9ecef;
  --ctl-ghost-border: #d8dde3; --ctl-ghost-fg: #616b78; --ctl-ghost-hover-bg: #f2f4f6; --ctl-ghost-hover-fg: #161c24;
  --ctl-danger-bg: #fdeaea; --ctl-danger-border: #f0bcbc; --ctl-danger-fg: #b83232;
  --ctl-vsave-bg: #e4f4ec; --ctl-vsave-border: #b8e2cd; --ctl-vsave-fg: #146c44; --ctl-vsave-hover-bg: #d5eede;
  --ctl-icon-border: #d8dde3;
  --modal-x-color: #8a929e; --modal-x-hover-color: #b83232; --modal-x-hover-bg: #fdeaea;
}

/* ============ 2. SEMANTIC — BLACK (OLED, dark variant) ============
   Faqat fon/chegara farqi — qolgan hamma narsa dark'dan meros. */
:root[data-theme="black"] {
  --color-bg: #000000;
  --color-surface: #000000;
  --color-surface-2: #0a0a0a;
  --color-surface-3: #121212;
  --color-surface-sunken: #000000;
  /* Chegara: pure-black fonda ko'rinsin uchun yorqinroq — neytral kulrang. */
  --color-border: #2b2f34;
  --color-border-strong: #3d434a;
  --ctl-border: #2b2f34;
}

/* ============ 3. SUBSYSTEM PALITRALAR ============
   Har biri o'z domeni: kod syntax highlight, HTTP status/method, natija
   (assertion/flow) holati. Badge/status chip'lar ataylab "to'q fon + yorqin
   matn" — har mavzuda bir xil (qarang docs/design-system.md). Syntax va
   natija ranglari mavzuga bog'liq. */
:root {
  /* --- Kod syntax highlight (JSON / GraphQL) --- */
  --syntax-key: var(--color-primary-2);
  --syntax-string: #9fd88c;
  --syntax-number: #e0a634;
  --syntax-boolean: #b06bff;
  --syntax-null: var(--color-text-muted);
  /* Punktuatsiya: {}[]:,  — matndan biroz so'nik, tuzilma ko'rinsin-u
     e'tiborni tortmasin. Diff qo'shildi/o'chirildi ranglari alohida token
     emas — --result-pass/fail bilan bir xil (semantik jihatdan ham shu). */
  --syntax-punctuation: var(--color-text-muted);

  /* --- HTTP method ranglari (badge matni + flow node chizig'i) --- */
  --method-get: #4caf7d;
  --method-post: #e0a634;
  --method-put: #4f9eff;
  --method-delete: #ff6b6b;
  --method-patch: #b06bff;
  --method-head: #6bc7d6;

  /* --- HTTP status chip (to'q fon + yorqin matn, mavzudan qat'i nazar) --- */
  --status-ok-fg: #8ef0b3;  --status-ok-bg: #1c2e22;
  --status-3xx-fg: #8ec4f0; --status-3xx-bg: #1c2833;
  --status-4xx-fg: #f0c98e; --status-4xx-bg: #332b1c;
  --status-err-fg: #ffb0b0; --status-err-bg: #3a1f1f;
  --status-neutral-fg: #9aa0ac; --status-neutral-bg: #16261c;

  /* --- Account status badge (to'q fon + yorqin matn) --- */
  --badge-approved-fg: #8ff0b1; --badge-approved-bg: #1c3626;
  --badge-pending-fg: #f0b854;  --badge-pending-bg: #3d3018;
  --badge-rejected-fg: #ffabab; --badge-rejected-bg: #3a2020;
  --badge-suspended-fg: #f0a86e; --badge-suspended-bg: #362a1c;

  /* --- Natija holati: assertion / URL-var token --- */
  --result-pass-fg: #7fdba0; --result-pass-bg: #1c2e22;
  --result-fail-fg: #ff9c9c; --result-fail-bg: #2e1c1c;

  /* --- {{var}} token yoritish (URL, kv qatorlar, auth, body, script) ---
     Hozircha natija-holati ranglari bilan bir xil (hal qilingan = pass,
     hal qilinmagan = fail), lekin alohida nom — keyin farqlash uchun bitta
     joyda. Mavzuga bog'liqligi --result-* orqali meros bo'ladi. */
  --syntax-var-resolved-fg: var(--result-pass-fg);
  --syntax-var-resolved-bg: var(--result-pass-bg);
  --syntax-var-unresolved-fg: var(--result-fail-fg);
  --syntax-var-unresolved-bg: var(--result-fail-bg);

  /* --- Flow node kartochka portlari --- */
  --flow-port-label: var(--color-text-muted);
  --flow-node-body-bg: var(--color-surface);

  /* --- Flow evaluate/display node --- */
  --flow-node-code-bg: var(--color-surface-2);
  --flow-test-pass-bg: #1c3626; --flow-test-pass-fg: #8ff0b1;
  --flow-test-fail-bg: #3a2020; --flow-test-fail-fg: #ffabab;

  /* --- Flow empty-state "Start" sahna konnektorlari (4 variant) --- */
  --flow-start-link-a: var(--color-info);
  --flow-start-link-b: var(--method-post);
  --flow-start-link-c: var(--method-get);
  --flow-start-link-d: var(--method-patch);

  /* --- Flow step / edge test natijasi --- */
  --flow-ok-fg: #8ee6ac;
  --flow-ok-icon: #8ee6ac;
  --flow-err-fg: #ffabab;
  --flow-err-icon: #ff6b6b;
  --flow-summary-ok: #4ec17a;
  --flow-summary-err: #f0966b;

  /* --- Javob ichida qidiruv natijasi (current-hit matni har mavzuda to'q) --- */
  --resp-hit-bg: #4a4020;         --resp-hit-fg: #ffffff;
  --resp-hit-current-bg: #e0a634; --resp-hit-current-fg: var(--p-void);
}
:root[data-theme="light"] {
  /* Syntax key/string light qiymatlari cream backdrop'da WCAG AA (4.5) ga
     yetishi uchun asl #b45f3a/#1e8a4c dan bir oz to'qroq. */
  --syntax-key: #9c4c2c;
  --syntax-string: #166b39;
  --syntax-number: #a0631f;
  --syntax-boolean: #7a3fc4;

  --result-pass-fg: #166b39; --result-pass-bg: #e6f7ec;
  /* Sovuq light fon ustida WCAG AA uchun to'qroq qizil (var(--color-danger)
     #d23b3b -> 4.09, kam). */
  --result-fail-fg: #b52b2b; --result-fail-bg: var(--color-danger-bg);

  --flow-ok-fg: #1e7e42;
  --flow-ok-icon: #1e7e42;
  --flow-err-fg: #c92a2a;
  --flow-err-icon: #c92a2a;

  --resp-hit-bg: #fff3bf;         --resp-hit-fg: var(--p-void);
  --resp-hit-current-bg: #ffd43b; --resp-hit-current-fg: var(--p-void);
}
:root[data-theme="black"] {
  /* OLED qora fonda --syntax-key default qiymati (green-400) tananing
     yashil matn rangiga juda yaqin — JSON kalitlari ajralib turmaydi.
     Kalit uchun boshqa ohang (cyan), null uchun biroz yorqinroq kulrang. */
  --syntax-key: #4fc3d9;
  --syntax-null: #8b978d;
  --syntax-punctuation: #6f7b73;
}