/* ==========================================================================
   Xiva Prezident maktabi — DESIGN TOKENS
   Yagona manba. Komponent fayllarida bironta hardcoded rang yoʻq.
   Tema: [data-theme] = foydalanuvchi tanlovi (light|dark|system)
         [data-resolved] = hisoblangan tema (light|dark) — CSS shunga tayanadi
   ========================================================================== */

:root {
  /* ---------- Primitivlar (faqat semantik tokenlar ichida ishlatiladi) ---- */
  --p-navy-900: #0B1633;
  --p-navy-800: #0E1C3F;
  --p-navy-700: #16295C;   /* rasmiy brend koʻki */
  --p-navy-600: #1E3572;
  --p-navy-500: #2C4489;
  --p-navy-300: #8FA8E6;
  --p-navy-200: #C3CDE6;
  --p-navy-100: #E2E8F4;
  --p-navy-050: #F1F4FA;

  --p-terra-800: #7E3419;
  --p-terra-700: #9A3C1E;
  --p-terra-600: #B84A26;
  --p-terra-500: #C2542E;  /* Xiva terrakotasi */
  --p-terra-400: #E0784F;
  --p-terra-300: #F0946B;
  --p-terra-100: #F7E4DA;
  --p-terra-050: #FCF2EC;

  --p-ink-950: #0B1220;
  --p-ink-900: #101623;
  --p-ink-850: #121A2C;
  --p-ink-800: #16203A;
  --p-ink-750: #18223A;
  --p-ink-700: #222E4A;
  --p-slate-600: #3A4457;
  --p-slate-500: #5A6577;
  --p-slate-400: #7C879A;
  --p-slate-300: #A8B2C6;
  --p-slate-250: #C8D0DD;
  --p-slate-200: #D7DCE5;
  --p-slate-100: #E9ECF2;
  --p-slate-050: #F6F7FA;
  --p-white: #FFFFFF;

  --p-green-700: #17603A;
  --p-green-600: #1F7A46;
  --p-green-300: #6FD39B;
  --p-green-100: #E1F3E8;
  --p-amber-700: #8A5A06;
  --p-amber-600: #A76F0B;
  --p-amber-300: #F0C165;
  --p-amber-100: #FBEED3;
  --p-red-700: #A32B22;
  --p-red-600: #C0362B;
  --p-red-300: #F4948B;
  --p-red-100: #FBE4E1;

  /* ---------- Semantik: YORUGʻ TEMA ------------------------------------- */
  --bg: var(--p-slate-050);
  --bg-alt: var(--p-white);
  --surface: var(--p-white);
  --surface-2: var(--p-navy-050);
  --surface-3: var(--p-slate-100);
  --fg: var(--p-ink-900);
  --fg-muted: var(--p-slate-500);
  --fg-faint: var(--p-slate-400);
  --border: var(--p-slate-200);
  --border-soft: var(--p-slate-100);
  --border-strong: var(--p-slate-300);

  --brand: var(--p-navy-700);
  --brand-strong: var(--p-navy-800);
  --brand-fg: var(--p-white);
  --brand-surface: var(--p-navy-050);
  --brand-border: var(--p-navy-200);

  --band-bg: var(--p-navy-800);
  --band-fg: #DCE4F5;
  --band-fg-strong: var(--p-white);
  --band-border: rgba(255, 255, 255, 0.14);
  --band-hover: rgba(255, 255, 255, 0.10);
  --band-ph-bg: rgba(255, 255, 255, 0.05);
  --band-ph-stripe: rgba(255, 255, 255, 0.06);

  --accent: var(--p-terra-600);
  --accent-hover: var(--p-terra-700);
  --accent-fg: var(--p-white);
  --accent-text: var(--p-terra-700);
  --accent-quiet: var(--p-terra-050);
  --accent-line: var(--p-terra-500);

  --ok: var(--p-green-600);
  --ok-surface: var(--p-green-100);
  --warn: var(--p-amber-700);
  --warn-surface: var(--p-amber-100);
  --danger: var(--p-red-700);
  --danger-surface: var(--p-red-100);
  --neutral-surface: var(--p-slate-100);

  --focus: var(--p-navy-600);
  --focus-on-band: #F7C9B3;

  --emblem-fg: var(--p-navy-700);
  --emblem-globe: var(--p-navy-500);
  --emblem-star: var(--p-terra-500);
  --emblem-plate: var(--p-white);

  --ph-bg: var(--p-navy-050);
  --ph-stripe: rgba(22, 41, 92, 0.10);
  --ph-border: var(--p-navy-200);
  --ph-fg: var(--p-slate-500);

  --shadow-sm: 0 1px 2px rgba(11, 22, 51, 0.06);
  --shadow-md: 0 6px 20px -8px rgba(11, 22, 51, 0.20);
  --shadow-lg: 0 18px 48px -20px rgba(11, 22, 51, 0.35);
  --lattice-ink: rgba(22, 41, 92, 0.055);

  color-scheme: light;
}

/* ---------- Semantik: QORONGʻI TEMA -------------------------------------- */
:root[data-resolved="dark"] {
  --bg: var(--p-ink-950);
  --bg-alt: var(--p-ink-850);
  --surface: var(--p-ink-850);
  --surface-2: var(--p-ink-750);
  --surface-3: var(--p-ink-700);
  --fg: #E7ECF6;
  --fg-muted: var(--p-slate-300);
  --fg-faint: #8A94A9;
  --border: rgba(255, 255, 255, 0.11);
  --border-soft: rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.22);

  --brand: var(--p-navy-300);
  --brand-strong: #B7C7F0;
  --brand-fg: var(--p-ink-950);
  --brand-surface: #141F3E;
  --brand-border: rgba(159, 182, 232, 0.30);

  --band-bg: var(--p-ink-800);
  --band-fg: #D8E0F0;
  --band-fg-strong: var(--p-white);
  --band-border: rgba(255, 255, 255, 0.12);
  --band-hover: rgba(255, 255, 255, 0.09);
  --band-ph-bg: rgba(255, 255, 255, 0.04);
  --band-ph-stripe: rgba(255, 255, 255, 0.05);

  --accent: var(--p-terra-500);
  --accent-hover: var(--p-terra-400);
  --accent-fg: var(--p-white);
  --accent-text: var(--p-terra-300);
  --accent-quiet: rgba(194, 84, 46, 0.16);
  --accent-line: var(--p-terra-400);

  --ok: var(--p-green-300);
  --ok-surface: rgba(31, 122, 70, 0.22);
  --warn: var(--p-amber-300);
  --warn-surface: rgba(167, 111, 11, 0.24);
  --danger: var(--p-red-300);
  --danger-surface: rgba(192, 54, 43, 0.24);
  --neutral-surface: rgba(255, 255, 255, 0.07);

  --focus: #9FC1FF;
  --focus-on-band: #F7C9B3;

  --emblem-fg: #C7D4F2;
  --emblem-globe: var(--p-navy-300);
  --emblem-star: var(--p-terra-300);
  --emblem-plate: transparent;

  --ph-bg: rgba(255, 255, 255, 0.035);
  --ph-stripe: rgba(255, 255, 255, 0.06);
  --ph-border: rgba(255, 255, 255, 0.18);
  --ph-fg: var(--p-slate-300);

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 6px 20px -8px rgba(0, 0, 0, 0.65);
  --shadow-lg: 0 18px 48px -20px rgba(0, 0, 0, 0.80);
  --lattice-ink: rgba(159, 182, 232, 0.055);

  color-scheme: dark;
}

/* ==========================================================================
   TIPOGRAFIKA — butun shkala bitta --font-scale oʻzgaruvchisiga bogʻlangan
   ========================================================================== */
:root {
  --font-scale: 1;

  --font-display: "UzMarksSerif", "IBM Plex Serif", Charter, Georgia, "Noto Serif", serif;
  --font-body: "UzMarksSans", "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
  --font-mono: ui-monospace, "SF Mono", "IBM Plex Mono", Menlo, Consolas, monospace;

  /* rem shkala — vw yoʻq, shuning uchun A+/A− 100% ishlaydi */
  --fs-caption: 0.75rem;
  --fs-small: 0.8125rem;
  --fs-ui: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.0625rem;
  --fs-h4: 1.125rem;
  --fs-h3: 1.3125rem;
  --fs-h2: 1.625rem;
  --fs-h1: 2rem;
  --fs-display: 2.375rem;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-body: 1.6;

  --ls-caps: 0.08em;
  --ls-ui: 0.01em;
  --ls-h: -0.015em;
  --ls-display: -0.025em;

  --w-read: 400;
  --w-emph: 500;
  --w-announce: 600;

  /* Interval — rem da, shuning uchun matn kattalashganda joy ham kengayadi */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 5.5rem;

  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  --wrap: 76rem;
  --wrap-narrow: 46rem;
  --tap: 2.75rem; /* 44px @1x — minimal bosish maydoni */
}

@media (min-width: 64rem) {
  :root {
    --fs-h2: 1.875rem;
    --fs-h1: 2.375rem;
    --fs-display: 3rem;
  }
}