/*
 * JAHONORO dizayn tokenlari — DESIGN.md 2–4, 8 bo'limlari.
 * Komponentlarda hex yoki px shrift o'lchami yozilmaydi, faqat shu o'zgaruvchilar.
 */

/* ---------- Ranglar: tungi (asosiy) ---------- */
:root,
:root[data-theme="dark"],
.theme-night {
  color-scheme: dark;

  --bg: #101522;
  --surface: #181E2B;
  --surface-2: #212839;
  --line: rgba(247, 244, 237, 0.08);
  --line-strong: rgba(247, 244, 237, 0.16);
  --text: #F7F4ED;
  --text-2: #929BAD;
  --text-3: #646D80;
  --gold: #D8B36A;
  --gold-ink: #101522;
  --gold-text: #D8B36A;
  --gold-soft: rgba(216, 179, 106, 0.14);
  --gold-line: rgba(216, 179, 106, 0.38);
  --success: #3FA67A;
  --success-text: #3FA67A;
  --success-soft: rgba(63, 166, 122, 0.14);
  --warning: #D9A441;
  --warning-text: #D9A441;
  --warning-soft: rgba(217, 164, 65, 0.14);
  --danger: #E5564F;
  --danger-text: #F07C75;
  --danger-soft: rgba(229, 86, 79, 0.14);
  --muted-soft: rgba(146, 155, 173, 0.14);

  /* Chipta foni: --surface dan 3% ochroq yengil vertikal o'tish (yagona gradient) */
  --ticket-top: #1E2431;
  --ticket-bottom: #181E2B;

  /* Bosilgan holat: fon 8% to'qroq */
  --press-shade: rgba(0, 0, 0, 0.08);
  --skeleton-shine: rgba(247, 244, 237, 0.05);
  --nav-bg: rgba(16, 21, 34, 0.9);
  --header-bg: rgba(16, 21, 34, 0.92);
}

/* ---------- Ranglar: kunduzgi ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #F7F4ED;
  --surface: #FFFFFF;
  --surface-2: #EFEADF;
  --line: rgba(16, 21, 34, 0.08);
  --line-strong: rgba(16, 21, 34, 0.16);
  --text: #101522;
  --text-2: #5B6475;
  --text-3: #8A91A0;
  --gold: #D8B36A;
  --gold-ink: #101522;
  --gold-text: #8C6A24;
  --gold-soft: rgba(216, 179, 106, 0.18);
  --gold-line: rgba(140, 106, 36, 0.38);
  --success-text: #24704F;
  --warning-text: #8A5F12;
  --danger-text: #B8322C;
  --muted-soft: rgba(91, 100, 117, 0.12);
  --skeleton-shine: rgba(255, 255, 255, 0.6);
  --nav-bg: rgba(247, 244, 237, 0.9);
  --header-bg: rgba(247, 244, 237, 0.92);
}

:root {
  /* Sahifa foni chipta ichida ham o'zgarmasin (teshiklar uchun) */
  --page-bg: var(--bg);

  /* To'y turlari — faqat 3px chiziq, nuqta va chip uchun */
  --t-kelin: #D8B36A;
  --t-nikoh: #D49A9A;
  --t-sunnat: #5FAFA5;
  --t-beshik: #A796DA;
  --t-fotiha: #93B37F;
  --t-korp: #7499CF;
  --t-boshqa: #929BAD;

  /* Telegram MainButton rangi bilan bir xil (JS'da ham) */
  --overlay: rgba(0, 0, 0, 0.5);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.35);

  /* Shriftlar */
  --font-display: "Bodoni Moda", Georgia, serif;
  --font-text: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Tipografiya shkalasi */
  --fs-hero: 64px;     --lh-hero: 1;
  --fs-time: 34px;     --lh-time: 1.05;
  --fs-h1: 28px;       --lh-h1: 1.15;
  --fs-h2: 20px;       --lh-h2: 1.25;
  --fs-row-time: 22px; --lh-row-time: 1.1;
  --fs-body: 15px;     --lh-body: 1.45;
  --fs-label: 13px;    --lh-label: 1.35;
  --fs-micro: 12px;    --lh-micro: 1.3;
  --fs-logo: 20px;
  --fs-logo-lg: 32px;
  --fs-stat: 34px;
  --fs-money: 22px;
  --fs-input: 16px;
  --fs-badge: 11px;
  --fs-tiny: 10px;
  --ls-logo: 0.06em;

  /* Oraliq — 4px to'r */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-14: 56px;
  --page-x: 16px;

  /* Radius ierarxiyasi */
  --r-ticket: 22px;
  --r-sheet: 24px;
  --r-block: 16px;
  --r-control: 12px;
  --r-cell: 10px;
  --r-pill: 999px;

  /* Harakat */
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --dur: 180ms;
  --dur-sheet: 280ms;
  --dur-page: 160ms;
  --dur-press: 120ms;
  --dur-shimmer: 1.4s;

  /* O'lchamlar */
  --tap: 44px;
  --row-min: 64px;
  --control-h: 48px;
  --control-h-sm: 36px;
  --chip-h: 26px;
  --fab: 56px;
  --tabbar-h: 60px;
  --bar: 3px;
  --hole: 20px;
  --dot: 5px;
  --chip-dot: 6px;
  --handle-w: 36px;
  --handle-h: 4px;
  --row-time-w: 56px;
  --icon-sm: 18px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --avatar: 36px;
  --stroke: 1px;
  --focus-ring: 2px;

  /* Xavfsiz zonalar (Telegram contentSafeAreaInset bo'lsa JS yozadi) */
  --safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-top, 0px));
  --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-safe-bottom, 0px));

  /* Telegram balandligi */
  --vh: var(--tg-viewport-stable-height, 100vh);
}

@media (min-width: 390px) {
  :root {
    --page-x: 20px;
  }
}