/* Токены дизайна. Значения сняты с макетов приблизительно — уточняются по ходу. */
:root {
  color-scheme: dark;

  /* --- Фон и поверхности: «glass and neon» --- */
  --bg-base: #02040c;
  --bg: #0d0e12;
  --bg-deep: #090a0f;
  /* Фон рабочей области по новому референсу: почти чёрный сверху, тёмный индиго снизу. */
  --page-bg: linear-gradient(
    159deg,
    #0a0b1d 0%,
    #11132e 25%,
    #16183c 50%,
    #1a1d4b 75%,
    #20225e 100%
  );
  --surface: #151624;
  --surface-2: #1d1e30;
  --surface-3: #2a2c44;
  /* Единый цвет нижней панели и «пузыря» — чтобы не разъезжались. */
  --nav-surface: #171824;
  /* Единый материал «тёмное матовое стекло» для всех стеклянных поверхностей. */
  --glass-base: rgba(15, 17, 22, 0.48);
  --glass-tint: rgba(22, 24, 30, 0.2);
  --glass-bg: rgba(17, 19, 24, 0.58);
  --glass-border: rgba(205, 210, 220, 0.19);
  --glass-filter: blur(24px) saturate(106%) brightness(0.89);
  --glass-shadow: 0 10px 30px rgba(0, 0, 0, 0.28), 0 2px 8px rgba(0, 0, 0, 0.16);
  --glass-drop-shadow: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.28))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.16));
  --border: rgba(255, 255, 255, 0.08);
  --border-strong: rgba(255, 255, 255, 0.14);

  /* --- Текст: белый и полупрозрачный --- */
  --text: #f2f3fa;
  --text-2: rgba(255, 255, 255, 0.6);
  --text-dim: rgba(255, 255, 255, 0.6);
  --text-3: rgba(255, 255, 255, 0.38);
  /* Неактивные иконки/вторичные элементы (AA на тёмном фоне). */
  --text-muted: rgba(255, 255, 255, 0.5);

  /* --- Акцент: индиго --- */
  --accent: #6366f1;
  --accent-hi: #a5a6ff;
  --accent-soft: #a5a6ff;
  --accent-ink: #ffffff;

  /* --- Цвета категорий (Figma tokens «category») --- */
  --cat-movies: #7c8cff;
  --cat-books: #6ee7b7;
  --cat-games: #c084fc;
  --cat-series: #60a5fa;
  --cat-anime: #f472b6;
  --cat-cartoon: #fbbf24;
  --cat-drama: #2dd4bf;

  /* --- Цвета статусов: единственный источник для карточек, кнопки и шторки --- */
  --status-planned: #8b8df5;
  --status-watching: #a5a6ff;
  --status-finished: #5eead4;
  /* «Отложено» у игр: янтарный из уже существующей палитры. */
  --status-on-hold: var(--cat-cartoon);
  --status-dropped: var(--text-2);

  /* --- Рейтинг --- */
  --rating: #f2cb6b;

  /* --- Скругления --- */
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 18px;
  --r-5: 24px;
  --r-pill: 999px;

  /* --- Ритм --- */
  --gutter: 20px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;

  /* --- Типографика --- */
  --font: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: 26px;
  --fs-h1: 22px;
  --fs-h2: 18px;
  --fs-body: 15px;
  --fs-sm: 13px;
  --fs-xs: 11px;
  --lh-tight: 1.15;
  --lh-body: 1.45;

  /* --- Метрики, движение, доступ --- */
  --nav-h: 64px;
  --tap: 44px;
  --dur: 0.18s;
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.45);

  /* --- Безопасные зоны ---
     В Telegram 8.0+ клиент сам подкладывает --tg-safe-area-inset-* и
     --tg-content-safe-area-inset-*. В обычном браузере остаются env(). */
  --app-top-inset: calc(
    var(--tg-safe-area-inset-top, env(safe-area-inset-top, 0px)) +
      var(--tg-content-safe-area-inset-top, 0px)
  );
  --app-bottom-inset: calc(
    var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) +
      var(--tg-content-safe-area-inset-bottom, 0px)
  );
  --safe-top: var(--app-top-inset);
  --safe-bottom: var(--app-bottom-inset);

  /* --- Логотип: лаванда из макета для входа, белый знак внутри приложения --- */
  --logo-mark: #7b84f6;
  --logo-mark-app: var(--text);
}

/* --- Акцентные палитры: выбор в Настройках → Оформление --- */
:root[data-accent="violet"] {
  --accent: #a855f7;
  --accent-hi: #d8b4fe;
  --accent-soft: #d8b4fe;
}

:root[data-accent="teal"] {
  --accent: #14b8a6;
  --accent-hi: #5eead4;
  --accent-soft: #5eead4;
}

:root[data-accent="rose"] {
  --accent: #f472b6;
  --accent-hi: #f9a8d4;
  --accent-soft: #f9a8d4;
}

/* Ручной режим «меньше анимации» повторяет системную настройку. */
.reduce-motion *,
.reduce-motion *::before,
.reduce-motion *::after {
  animation-duration: 0.01ms !important;
  animation-delay: 0ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

/* Категория: один атрибут задаёт --cat (аниме — отдельный data-category). */
[data-type="movie"] { --cat: var(--cat-movies); }
[data-type="series"] { --cat: var(--cat-series); }
[data-type="game"] { --cat: var(--cat-games); }
[data-type="book"] { --cat: var(--cat-books); }
[data-category="anime"] { --cat: var(--cat-anime); }
[data-category="cartoon"] { --cat: var(--cat-cartoon); }
[data-category="drama"] { --cat: var(--cat-drama); }

/* Цвет статуса — тем же способом. */
[data-status="planned"] { --status-color: var(--status-planned); }
[data-status="watching"] { --status-color: var(--status-watching); }
[data-status="finished"] { --status-color: var(--status-finished); }
[data-status="on_hold"] { --status-color: var(--status-on-hold); }
[data-status="dropped"] { --status-color: var(--status-dropped); }