/* ============================================================
   SARAFILM — DIZAYN TIZIMI: TOKENLAR
   Barcha rang, o'lcham va bo'shliq shu yerda ta'riflanadi.
   Komponentlarda qattiq kodlangan qiymat yozilmaydi.
   ============================================================ */

:root {
  /* ---------- Sirtlar (qorong'i, sovuq-neytral) ----------
     Bir necha daraja: sahifa foni -> panel -> ko'tarilgan element.
     Har biri oldingisidan sezilarli farq qiladi, shunda chegara
     chizmasdan ham qatlamlar ajralib turadi. */
  --surface-0: #0b0d12;   /* sahifa foni */
  --surface-1: #12151d;   /* kartochka, panel */
  --surface-2: #191d28;   /* ko'tarilgan (hover, dropdown) */
  --surface-3: #222736;   /* input, chip */

  /* ---------- Matn ----------
     4 daraja yetarli. Ko'proq daraja ierarxiyani buzadi. */
  --text-primary: #f2f4f8;
  --text-secondary: #a8b0c0;
  --text-tertiary: #6b7385;
  --text-on-brand: #1a1205;   /* sariq fonda o'qiladigan to'q matn */

  /* ---------- Chegara ---------- */
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.2);

  /* ---------- Brend ----------
     Bitta aksent. Faqat harakat (tugma, faol holat, fokus) uchun.
     Bezak sifatida ishlatilmaydi. */
  --brand: #ffa826;
  --brand-hover: #ffb648;
  --brand-active: #f09410;
  --brand-subtle: rgba(255, 168, 38, 0.12);
  --brand-border: rgba(255, 168, 38, 0.35);

  /* ---------- Semantik (faqat ma'no uchun) ---------- */
  --rating-high: #4ade80;     /* 7.0+ */
  --rating-mid: #fbbf24;      /* 5.0–6.9 */
  --rating-low: #f87171;      /* <5.0 */
  --imdb: #f5c518;
  --danger: #ef4444;
  --success: #22c55e;

  /* ---------- Tipografiya ----------
     Ikkita oila: sarlavha uchun Outfit, matn uchun Inter.
     Modulli shkala (1.25) — o'lchamlar tasodifiy emas. */
  --font-display: "Outfit", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --text-2xs: 0.6875rem;   /* 11px — meta, badge */
  --text-xs:  0.75rem;     /* 12px */
  --text-sm:  0.8125rem;   /* 13px */
  --text-base:0.9375rem;   /* 15px — asosiy matn */
  --text-lg:  1.0625rem;   /* 17px */
  --text-xl:  1.25rem;     /* 20px — bo'lim sarlavhasi */
  --text-2xl: 1.625rem;    /* 26px */
  --text-3xl: 2.125rem;    /* 34px */
  --text-4xl: 2.75rem;     /* 44px — hero sarlavha */

  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.6;

  /* ---------- Bo'shliq (4px shkala) ----------
     Barcha padding/margin shu qiymatlardan olinadi. */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* ---------- Radius ---------- */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* ---------- Ko'tarilish (soya) ----------
     Kam va aniq. Har bir daraja o'z vazifasiga ega. */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);

  /* ---------- Harakat ----------
     Tez va sezilmas. Sayt "o'ynamaydi", javob beradi. */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --duration-fast: 120ms;
  --duration-base: 200ms;

  /* ---------- Layout ---------- */
  --container-max: 1440px;
  --container-pad: var(--space-8);
  --header-height: 64px;
}

@media (max-width: 1024px) {
  :root {
    --container-pad: var(--space-5);
    --text-4xl: 2.125rem;
    --text-3xl: 1.75rem;
  }
}

@media (max-width: 640px) {
  :root {
    --container-pad: var(--space-4);
    --text-4xl: 1.75rem;
    --text-3xl: 1.5rem;
    --text-2xl: 1.3rem;
    --header-height: 56px;
  }
}

/* Harakatni kamaytirish so'ralgan bo'lsa — hurmat qilamiz */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}