/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */

:root {
    /* Настраиваемые переменные для градиента-сетки */
    --grid-color: #d3d3d3;
    /* Цвет линий сетки */
    --grid-step: 2px;
    /* Толщина цветной и прозрачной полосы */
    --bg-top: #e7e7e7;
    /* Верхний цвет плавного фона */
    --bg-bottom: #1a1a1a;
    /* Нижний цвет плавного фона */
    --bg-start-offset: 0.01%;
    /* Точка старта изменения цвета */

    /* Скомбинированный многоcлойный фон страницы */
    --page-gradient:
        /* Полосы слева направо */
        repeating-linear-gradient(to right,
            var(--grid-color) 0 var(--grid-step),
            transparent var(--grid-step) calc(var(--grid-step) * 2)),
        /* Полосы сверху вниз */
        repeating-linear-gradient(to bottom,
            var(--grid-color) 0 var(--grid-step),
            transparent var(--grid-step) calc(var(--grid-step) * 2)),
        /* Плавное изменение насыщенности сверху вниз */
        linear-gradient(to bottom,
            var(--bg-top) var(--bg-start-offset),
            var(--bg-bottom) 100%);

    /* Адаптивная ширина контейнера (резиновая): */
    --container-inline-size: min(100%, 700px);
    /* Внешние отступы шапки: при 1440×960 получим 100 370 492 370 */
    --header-mt: clamp(16px, calc(100vw * 100 / 1440), 100px);
    /* Нижний внешний отступ шапки: 93px при ширине 1440px (уменьшено на 5px), может уменьшаться на более узких экранах */
    --header-mb: clamp(16px, calc(100vw * 93 / 1440), 93px);

    /* Внутренние отступы шапки */
    /* Горизонтальные паддинги контейнера шапки */
    --header-pad: clamp(12px, 2vw, 24px);
    /* Вертикальные паддинги шапки: 130px на десктопе, 122px на 375px */
    --header-pad-block: clamp(122px, calc(100vw * 130 / 1440), 130px);

    /* Типографика шапки */
    --header-logo-size: 65px;
    /* фиксированный размер для десктопа */
    --header-subtitle-size: 23px;
    /* фиксированный размер для десктопа */
    --header-subtitle-weight: 400;
    /* Расстояние между заголовком и подзаголовком строго 20px */
    --header-gap: 20px;

    /* Переменные шрифтов и начальные веса */
    --font-main: 'Inter', Arial, sans-serif;
    --font-accent: 'PressStart2P', fantasy;
    --card-title-weight: 715;
    /* Вес заголовка карточки */

    /* Переменные карточек */
    /* Лейбл на изображении */
    --label-stroke-color: #ffffff;
    /* Цвет обводки текста лейбла */
    --label-opacity: 0.5;
    /* Прозрачность лейбла */

    /* Типографика заголовка карточки */
    --card-title-size: 18px;
    --card-title-line-height: 1;
    --card-title-letter: 0;

    /* Типографика описания карточки */
    --card-desc-size: 18px;
    --card-desc-line-height: 1.2;
    --card-desc-weight: 410;

    /* Цвета анимаций лайка */
    --contour-color: #000000;
    /* цвет контура сердца */
    --animation-fill-color: #ff0000;
    /* базовый цвет заливки (искры/лайк) */
}