/* В этом файле будут храниться все значения переменных в исходном состоянии, а так же их изменения в зависимости от ширины устройства */
:root {
  --font-sans: 'Inter'; 
  --font-mono: 'PressStart2P', fantasy; 
  --text-weight: 410;    
  --heading-weight: 715;
  --accent-weight: 400; 
    /* Резиновые значения для шапки */
  --header-width: clamp(375px, 80%, 700px);
  --header-height: clamp(250px, 40vh, 368px);
  --logo-size: clamp(49px, 10vw, 65px);
  --title-font-size: clamp(20px, 6vw, 48px);
  --subtitle-font-size: clamp(14px, 4vw, 23px);

  --background-clr: #fff;
  --card-bg: #fff;
  --label-color: #000; 
  --label-stroke: #fff; 
  --text: #000;
  --card-padding: 25px;
  --transition-mid: 0.3s;

  /* heart SVG */
  --sparks-fill-clr: #f00;
  --sparks-fill-clr-transparent: rgb(255 0 0 / 0%);
  --contour-clr: rgb(0 0 0);
  --core-clr: rgb(0 0 0);
  --core-clr-transparent: rgb(0 0 0 / 0%);
  --main-body-clr: rgb(0 0 0);
  --main-body-clr-transparent: rgb(0 0 0 / 0%);
  --contour-active-clr: #f00;
  --core-active-clr: #f00;
  --main-body-active-clr: #f00;

  --grid-bg: 
    /* Горизонтальные полосы */
    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%,
    #e7e7e7 0.01%,
    #1a1a1a 100%
  );
}