/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --font-main: 'Inter', sans-serif; /* основной, используется в карточках */
  --font-accent: 'PressStart2P', sans-serif; /* акцентный, используется в заголовках и кнопках */
  --font-weight-card-title: 715; /* толщина заголовка карточки */
  --font-weight-card-text: 410; /* толщина основного текста карточки */
  --background-page:            /* фон страницы */
    repeating-linear-gradient(to right, #d3d3d3 0 2px, transparent 2px 4px),
    repeating-linear-gradient(to bottom, #d3d3d3 0 2px, transparent 2px 4px),
    linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
  --border-color: #000; /* цвет границ у шапки, основного контента, обёртки картинок, кнопки лайк и всплывающего окна */
  --background-color: #fff; /* цвет фона шапки, карточек основного контента и кнопки сохранить */
  --container-width: clamp(375px, 100%, 700px); /* ширина контейнера контента */
  --card-label-color: #000; /* основной цвет лейба на картинке */
  --card-label-shadow: #fff; /* цвет тени лейба на картинке */
  --contour-color: #000; /* цвет искр иконки сердца */
  --animation-fill-color: #ff0000; /* цвет заливки иконки сердца */
  --focus-color: #000; /* цвет для фокуса кнопок */
  --button-color-hover: #000; /* цвет анимации кнопки при наведении */
  --button-color-text: #fff; /* цвет текста кнопки и иконки в кнопке сохранить, используется с mix-blend-mode */
  --dialog-backdrop: rgb(0 0 0 / 0.75) ; /* цвет затемнения фона всплывающего окна */
}