/* ============================================================
   Дизайн-токены. Монохром + постеры. Без градиентов и акцентов.
   ============================================================ */

:root {
  /* Типографика */
  --font-display: 'Unbounded', system-ui, sans-serif;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Типографская шкала */
  --fs-11: 0.6875rem;   /* 11 */
  --fs-12: 0.75rem;     /* 12 */
  --fs-13: 0.8125rem;   /* 13 */
  --fs-14: 0.875rem;    /* 14 */
  --fs-15: 0.9375rem;   /* 15 */
  --fs-17: 1.0625rem;   /* 17 */
  --fs-20: 1.25rem;     /* 20 */
  --fs-24: 1.5rem;      /* 24 */
  --fs-32: 2rem;        /* 32 */
  --fs-40: 2.5rem;      /* 40 */
  --fs-56: 3.5rem;      /* 56 */
  --fs-72: 4.5rem;      /* 72 */

  /* Отступы */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* Радиусы — сдержанные, без «мыльных» скруглений */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-poster: 8px;

  /* Тени — только там, где нужна глубина, минимально */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.18);
  --shadow-2: 0 8px 24px rgba(0, 0, 0, 0.35);

  /* Ширины */
  --container: 1440px;
  --gutter: 24px;
  --header-h: 64px;

  /* Анимации */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-med: 280ms;

  /* --- Тёмная тема (по умолчанию) --- */
  --bg: #0d0e11;
  --bg-soft: #111216;
  --surface: #15161a;
  --surface-2: #1a1c21;
  --border: #23252b;
  --border-strong: #2e3138;

  --text: #f2f3f5;
  --text-2: #a3a8b1;
  --text-3: #62666f;

  --inverse: #0d0e11;          /* текст/иконки на инвертированных элементах */

  --overlay: rgba(9, 10, 13, 0.78);
  --hero-fade: linear-gradient(180deg, rgba(9,10,13,0) 0%, rgba(9,10,13,.35) 40%, rgba(9,10,13,.96) 100%);

  --scroll-thumb: #2c2f36;
  --scroll-thumb-hover: #3a3e46;

  color-scheme: dark;
}

/* --- Светлая тема --- */
[data-theme='light'] {
  --bg: #f4f4f1;
  --bg-soft: #ececea;
  --surface: #ffffff;
  --surface-2: #fafaf7;
  --border: #e2e2dd;
  --border-strong: #d3d3cd;

  --text: #16181c;
  --text-2: #5c616a;
  --text-3: #8a8f99;

  --inverse: #f4f4f1;

  --overlay: rgba(244, 244, 241, 0.82);
  --hero-fade: linear-gradient(180deg, rgba(244,244,241,0) 0%, rgba(244,244,241,.4) 45%, rgba(244,244,241,.98) 100%);

  --scroll-thumb: #c9c9c3;
  --scroll-thumb-hover: #b4b4ad;

  color-scheme: light;
}

@media (max-width: 720px) {
  :root {
    --gutter: 16px;
    --header-h: 56px;
    --fs-56: 2.6rem;
    --fs-72: 3rem;
  }
}