/*
 * UI_TOKENS.css — единственный источник значений оформления kinogohd.biz.
 *
 * Источник истины: MASTER ТЗ №3 (разделы 3–7, 9, 12, 14, 17, 19) и референсы
 * 1.png / 2.png / 3.png. Инлайновые цвета и «магические» размеры в разметке и
 * в остальных стилях запрещены — всё берётся отсюда.
 *
 * Документация к токенам, шкалам и правилам применения — UI_TOKENS.md.
 * Правило изменений: значение правится здесь, а не в компоненте.
 */

:root {
    /* ── Фон и поверхности ───────────────────────────────────────────────── */
    --site-bg: #060809;
    --surface-1: #151719;
    --surface-2: #1c1e20;
    --surface-3: #242628;
    --surface-4: #2b2d2f;
    --sidebar-bg: #252729;

    /* Подложка под шапкой и футером: слои затемнения поверх изображений. */
    --overlay-soft: rgba(6, 8, 9, .55);
    --overlay-strong: rgba(6, 8, 9, .88);

    /*
     * Лист контентной колонки (референсы 1.png и 2.png): колонка — одна
     * сплошная панель, а секции внутри разделены врезанной линией, а не
     * промежутком между отдельными карточками. Линия двойная: тёмная сверху,
     * светлая снизу — на референсе это 1px #111 и 1px #404040 поверх #2b2b2b.
     * Светлую половину даёт --border, поэтому своего токена у неё нет.
     */
    --sheet-bg: #2b2d2f;
    --sheet-inset: #202224;
    --sheet-rule: rgba(0, 0, 0, .55);
    --sheet-edge: #000;

    /*
     * Верхняя полоса обеих колонок. Шапка блока сайдбара и крошки контентной
     * колонки обязаны кончаться на одной высоте: иначе первая же врезанная
     * линия идёт по фигуре двумя разными уровнями. Раньше высоты совпадали
     * случайно (39 против 40) и на главной, где крошек нет, расходились
     * на два десятка пикселей.
     */
    --sheet-header-height: 40px;

    /*
     * Полоса вкладок плеера (2.png): сама полоса — тот же лист, а текущая
     * вкладка врезана в него тёмным прямоугольником и стыкуется с чёрным
     * полем плеера под ней. Значение снято с референса пипеткой (#1a1a1a).
     */
    --player-tab-active: #1a1a1a;

    /*
     * Вкладки меню и полка карусели поверх кадра шапки (1.png). Значения сняты
     * с референса пипеткой: полоса вкладок #3f3f3f, активная вкладка #5a2a2a,
     * полка #585858 со светлой кромкой #848480 и чёрной линией стыка #0e0e0e.
     * Меню и полка на референсе слитны — щели между ними нет.
     */
    --nav-tab-bg: #3f3f3f;
    --nav-tab-hover: #4d4d4d;
    --nav-tab-active: #5a2a2a;
    --nav-tab-edge: rgba(255, 255, 255, .07);
    --carousel-bg: #585858;
    --carousel-edge: #848480;
    --carousel-seam: #0e0e0e;

    /* ── Границы ─────────────────────────────────────────────────────────── */
    --border: rgba(255, 255, 255, .09);
    --border-strong: rgba(255, 255, 255, .15);

    /* ── Текст ───────────────────────────────────────────────────────────── */
    --text-primary: #e4e4e4;
    --text-secondary: #a9a9a9;
    --text-muted: #777;
    /*
     * Ступень ниже --text-muted: сплошные полотна текста, которые стоят на
     * странице ради поиска, а не ради чтения (текст о сайте над подвалом,
     * 14.png). Отдельный тон нужен потому, что --text-muted работает на
     * коротких подписях, а на многоабзацном блоке он перетягивает внимание с
     * ленты.
     */
    --text-faint: #656565;
    --text-on-accent: #12100e;

    /* ── Акценты ─────────────────────────────────────────────────────────── */
    /*
     * Акцент золотистый, а не оранжевый: один тон на весь сайт — активная
     * вкладка, текущая серия, статус просмотра, ссылки-действия. Оттенок
     * тёплый и приглушённый, чтобы на листе #2b2d2f читаться металлом, а не
     * сигнальной краской. --accent-yellow остаётся более светлой ступенью
     * того же ряда (строка «Лучшее качество», строка про устройства).
     */
    --accent: #e6a92b;
    --accent-hover: #f7c451;
    --accent-yellow: #ffc400;

    /* ── Состояния ───────────────────────────────────────────────────────── */
    --success: #409a4b;
    --danger: #c94646;

    /*
     * Текущая строка тёмного списка — франшиза (3.png) и график выхода серий.
     * ТЗ №3, п.79 допускает здесь тёмный teal, но холодного синего в палитре
     * сайта нет ни в одном другом месте, и одна бирюзовая строка посреди
     * золотисто-серой страницы читалась чужеродной вставкой. Поэтому берём
     * приглушённый тёмный янтарь: он остаётся заметно темнее акцента, чтобы
     * полоса во всю ширину не перетягивала на себя страницу, но сидит в общей
     * гамме. Светимость сохранена от снятого с 3.png значения.
     */
    --row-current: #33363a;

    /*
     * Места ТОПа (8.png): первое золото, второе серебро, третье бронза.
     * Дальше — обычный приглушённый серый из --text-secondary. Второе место
     * нейтрально-серебряное, без холодного лавандового отлива: медальный ряд
     * так читается сам собой, а синего в палитре сайта нет нигде.
     */
    --top-rank-1: #dec356;
    --top-rank-2: #c8c8c8;
    --top-rank-3: #d68a55;

    /*
     * Лента состава сериала по нижнему краю постера (12.png): приглушённый
     * винный, а не сигнальный --danger. Значение снято с референса пипеткой.
     */
    --ribbon-series: #7f2a31;

    /*
     * Закладка в углу карточки (1.png): полотно ленты #595959 и перфорация
     * #878787 по верхнему краю. Обе светлее любой поверхности — на листе
     * #2b2d2f закладка обязана читаться силуэтом, а не угадываться.
     */
    --ribbon-bookmark: #595959;
    --ribbon-bookmark-edge: #878787;

    /* ── Ссылки ──────────────────────────────────────────────────────────── */
    --link: #d7d7d7;
    --link-hover: #ffffff;

    /* ── Метрика макета ──────────────────────────────────────────────────── */
    --site-width: 1024px;
    --sidebar-width: 300px;
    --gap: 14px;

    /* Высоты частей шапки (ТЗ №3, п.12 и 14). */
    --header-top-height: 40px;
    --hero-height: 210px;
    --nav-height: 30px;

    /*
     * Карусель постеров живёт в шапке поверх изображения (1.png). Ширина
     * постера не задаётся числом: её считает сетка из --carousel-columns,
     * иначе на краю ряда всегда торчит обрезанный постер.
     */
    --carousel-columns: 7;
    --carousel-gap: 6px;

    /* Логотип: desktop 150–200px, mobile 120–150px (ТЗ №3, п.13). */
    --logo-width: 176px;
    --logo-width-mobile: 132px;

    /* ── Отступы ─────────────────────────────────────────────────────────── */
    --space-1: 4px;
    --space-2: 6px;
    --space-3: 8px;
    --space-4: 10px;
    --space-5: 14px;
    --space-6: 20px;
    --space-7: 28px;

    /* Внутренний отступ панелей (сайдбар, блоки контента). */
    --panel-padding: 10px 12px;

    /* ── Скругления: 2–6px. 999px допустим только для аватара. ───────────── */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-avatar: 999px;

    /* ── Тени: минимальные, без свечения ─────────────────────────────────── */
    --shadow-1: 0 2px 8px rgba(0, 0, 0, .25);

    /* ── Типографика ─────────────────────────────────────────────────────── */
    --font-base: Inter, Roboto, Arial, sans-serif;

    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-sidebar: 13px;
    --font-size-base: 14px;
    /*
     * Строки метаданных карточки («Год выпуска», «Страна», «Жанр») — крупнее
     * мелкого текста: на 1.png и 2.png это основной читаемый слой карточки,
     * а не подпись. В ленте 13px, на внутренней странице 14px.
     */
    --font-size-meta: 13px;
    --font-size-md: 15px;
    --font-size-card-title: 17px;
    --font-size-section: 17px;
    --font-size-h1: 26px;

    --line-height-tight: 1.4;
    --line-height-base: 1.55;
    --line-height-loose: 1.65;

    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --letter-spacing-caps: .06em;

    /* ── Постеры ─────────────────────────────────────────────────────────── */
    --poster-ratio: 2 / 3;
    --poster-feed-width: 175px;
    /*
     * Обложка внутренней страницы — примерно треть контентной колонки (2.png:
     * 198px при колонке в 640px). Прежние 300px забирали половину колонки, и
     * список фактов сжимался в узкий столбик, которого на референсе нет.
     */
    --poster-content-width: 200px;
    --poster-carousel-width: 140px;
    /*
     * Обложка в строке ТОПа (8.png): 110px при контентной колонке в 640px —
     * это 17% ширины листа, у нас те же 17% от 926px. Ленточные 175px здесь
     * делали из списка мест десять отдельных карточек.
     */
    --poster-top-width: 130px;

    /*
     * Коллаж обложек в строке индекса франшиз (13.png): 182x125 при колонке
     * в 646px — те же доли от нашей колонки в 926px.
     */
    --franchise-cover-width: 260px;
    --franchise-cover-height: 170px;

    /*
     * Скругление пузыря реплики в «Последних комментариях» (10.png). Это
     * единственное место, где радиус выходит за общие 2–6px: форма реплики
     * и есть смысл блока.
     */
    --radius-bubble: 12px;

    /* Кадр актёра в «В главных ролях» (2.png): 68x88 плюс подпись. */
    --actor-photo-width: 70px;

    /* ── Переходы ────────────────────────────────────────────────────────── */
    --transition-fast: .15s ease;
    --transition-base: .2s ease;

    /* ── Слои ────────────────────────────────────────────────────────────── */
    --z-nav: 20;
    --z-back-to-top: 40;
    --z-drawer-backdrop: 50;
    --z-drawer: 60;
    --z-modal: 70;
    /* Тост перекрывает модалку: сообщение об ошибке действия должно быть видно. */
    --z-toast: 80;
}

/*
 * Планшет ~900–1100px: сайдбар сужается до 220–250px (ТЗ №3, п.138).
 * Мобильный: hero уменьшается до 100–130px (п.139).
 * Сами точки перелома живут в layout.css — media-запрос не умеет читать переменные.
 */
@media (max-width: 1100px) {
    :root {
        --sidebar-width: 240px;
        --hero-height: 180px;
        --carousel-columns: 6;
    }
}

@media (max-width: 768px) {
    :root {
        --hero-height: 120px;
        --gap: 10px;
        --poster-feed-width: 130px;
        --poster-top-width: 110px;
        --carousel-columns: 4;
    }
}

@media (max-width: 520px) {
    :root {
        --carousel-columns: 3;
    }
}