/*
  Файл переменных CSS
  Содержит все базовые цвета, размеры и стили для всего проекта
*/

:root {
  /* Фоновый цвет страницы */
  --background-color: white;
  /* Цвет рамок элементов */
  --border-color: black;
  /* Основной цвет текста */
  --text-color: black;
  /* Цвет акцентного текста */
  --text-color-accent: black;
  /* Цвет тени для текста */
  --text-color-shadow: white;
  /* Цвет текста на кнопках */
  --color-span-button: white;
  /* Цвет иконки лайка */
  --like-color: #f00;
  /* Основной шрифт для текста */
  --font: 'Inter-Variable';
  /* Акцентный шрифт (например, для заголовков) */
  --font-accent: 'PressStart2P';
  /* Размер заголовков основного уровня */
  --title-size: clamp(0.875rem, 0.6769rem + 0.8451vw, 1.4375rem);
  /* Размер подзаголовков */
  --subtitle-size: clamp(3.0625rem, 2.7104rem + 1.5023vw, 4.0625rem);
  /* Размер текста в меню */
  --text-menu-size: 14px;
  /* Стандартный размер текста */
  --text-size: 18px;
  /* Жирность шрифта для заголовков */
  --heading-font-weight: 700;
  /* Жирность основного текста */
  --text-font-weight: 400;
  /* Цвет для линий сетки в градиенте */
  --grid-color: #d3d3d3;
  /* Начальный цвет для основного градиента */
  --gradient-start: #e7e7e7;
  /* Конечный цвет для основного градиента */
  --gradient-end: #1a1a1a;
  /* Комбинированный градиент фона */
  --background-image-gradient: repeating-linear-gradient(
      90deg,
      var(--grid-color) 0 2px,
      transparent 2px 4px
    ),
    repeating-linear-gradient(0deg, var(--grid-color) 0 2px, transparent 2px 4px),
    linear-gradient(var(--gradient-start), var(--gradient-end));
}