/* AllohaSerial — токены оформления.
   Единственное место, где заданы цвета, размеры и отступы.
   Меняете здесь — меняется весь сайт. */

:root {
  /* Системные элементы (чекбоксы, ползунки, стрелки числовых полей, полосы прокрутки)
     рисуются тёмными: сайт тёмный при любой системной теме. */
  color-scheme: dark;
  accent-color: var(--accent);

  /* --- поверхности ---
     Нейтральные с лёгким холодным уклоном: на чистом сером
     постеры выглядят вылинявшими, на слегка синеватом — живее. */
  --ground:      #0c0f11;
  --ground-soft: #101417;
  --surface:     #161b1f;
  --surface-2:   #1d2429;
  --surface-3:   #252d33;

  /* --- текст --- */
  --ink:    #e8edef;
  --ink-2:  #98a6ad;
  --ink-3:  #6b7980;

  /* --- линии --- */
  --rule:      #232b31;
  --rule-soft: #1a2126;

  /* --- акцент ---
     Тёплое золото: цвет рейтинга и наград, привычный для кино
     и хорошо читаемый на тёмном. Единственный яркий цвет на странице. */
  --accent:      #e8b44a;
  --accent-dim:  #b98a2f;
  --accent-ink:  #2a1f08;
  --accent-soft: #2a2314;

  /* --- смысловые --- */
  --ok:     #56c08a;
  --warn:   #e0a33c;
  --danger: #e8798c;
  --imdb:   #f5c518;

  /* Оценка посетителей. Нарочно не золотой: сайтовый --accent (#e8b44a)
     почти неотличим от жёлтого IMDb, и две шкалы рядом сливались бы
     в одну. Бирюза читается как «это наше», а не «это оттуда». */
  --vote:   #5ac8d8;

  /* --- шрифты ---
     Только системные: без внешних запросов и без скачков вёрстки. */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               "Noto Sans", Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
               "Liberation Mono", monospace;

  /* --- шкала кегля ---
     Растёт вместе с шириной экрана, поэтому на телевизоре
     текст крупнее без отдельных правил. */
  --text-xs:  clamp(0.72rem, 0.70rem + 0.10vw, 0.82rem);
  --text-sm:  clamp(0.82rem, 0.79rem + 0.14vw, 0.94rem);
  --text-md:  clamp(0.94rem, 0.90rem + 0.18vw, 1.08rem);
  --text-lg:  clamp(1.08rem, 1.02rem + 0.30vw, 1.30rem);
  --text-xl:  clamp(1.30rem, 1.16rem + 0.62vw, 1.75rem);
  --text-2xl: clamp(1.60rem, 1.34rem + 1.15vw, 2.60rem);

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

  --radius:    10px;
  --radius-sm: 6px;
  --radius-lg: 14px;

  /* Одинаковое наведение для кликабельных кадров и постеров. */
  --image-hover-duration: 0.65s;
  --image-hover-easing: cubic-bezier(0.22, 1, 0.36, 1);
  --image-hover-scale: 1.08;

  --wrap:      1100px;
  /* Мера строки для описаний. 68ch — классический ориентир по читаемости,
     но при общей ширине 1100 он оставлял справа почти половину пустоты,
     и текст выглядел сжатым в колонку. 88ch держит строку в разумных
     пределах и при этом заполняет полосу. */
  --wrap-text: 88ch;

  --shadow:    0 1px 2px rgb(0 0 0 / 0.4), 0 10px 30px -18px rgb(0 0 0 / 0.8);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / 0.5), 0 24px 60px -24px rgb(0 0 0 / 0.9);

  --header-h: 60px;
}

/* Светлую тему сайт не предлагает намеренно: каталог кино смотрят
   в тёмной комнате, а постеры и кадры на тёмном фоне читаются лучше.
   Ниже — только страховка, чтобы страница не «просвечивала» чужим фоном. */
@media (prefers-color-scheme: light) {
  :root { color-scheme: dark; }
}