/* В этом файле вы опишете значения переменных в разных цветовых схемах.
Придерживайтесь такого именования классов:
✦ theme-dark — класс тёмной темы
✦ theme-light — класс светлой темы
✦ не забудьте описать стили для изменения темы через медизапрос пользовательских предпочтений
*/
:root.theme-light {
  --card-width: clamp(23.438rem, 16.285rem + 30.516vw, 43.75rem);
  --accent-color: #000;
  --background-color: #fff;
  --background-image: repeating-linear-gradient(
      transparent,
      transparent,
      #d3d3d3 2px,
      #d3d3d3 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent,
      #d3d3d3 2px,
      #d3d3d3 4px
    ),
    linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
  --font-family-accent: "PressStart2P-Regular";
  --font-family: "Inter-Variable";
  --font-card-text-weight: 400;
  --font-card-title-weight: 700;
  --font-size: 18px;
  --line-height: 21px;
  --card-background: #fff;
  --button-font-size: 14px;
  --text-stroke-color: #fff;
  --blend-color: #fff;
  --heart-contour: #000;
  --heart-fill: #ff0000;
}

:root.theme-dark {
  --accent-color: #00cc14;
  --font-card-text-weight: 465;
  --font-card-title-weight: 785;
  --background-color: #000;
  --background-image: repeating-linear-gradient(
      transparent,
      transparent,
      #000 2px,
      #000 4px
    ),
    repeating-linear-gradient(
      90deg,
      transparent,
      transparent,
      #000 2px,
      #000 4px
    ),
    linear-gradient(to bottom, #007f0c 0.01%, #004306);
  --text-stroke-color: #000;
  --blend-color: #00cc14;
  --heart-contour: #00cc14;
}

@media (prefers-color-scheme: light) {
  :root {
    --card-width: clamp(23.438rem, 16.285rem + 30.516vw, 43.75rem);
    --accent-color: #000;
    --background-color: #fff;
    --background-image: repeating-linear-gradient(
        transparent,
        transparent,
        #d3d3d3 2px,
        #d3d3d3 4px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent,
        #d3d3d3 2px,
        #d3d3d3 4px
      ),
      linear-gradient(to bottom, #e7e7e7 0.01%, #1a1a1a);
    --font-family-accent: "PressStart2P-Regular";
    --font-family: "Inter-Variable";
    --font-card-text-weight: 400;
    --font-card-title-weight: 700;
    --font-size: 18px;
    --line-height: 21px;
    --card-background: #fff;
    --button-font-size: 14px;
    --text-stroke-color: #fff;
    --blend-color: #fff;
    --heart-contour: #000;
    --heart-fill: #ff0000;
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #00cc14;
    --font-card-text-weight: 465;
    --font-card-title-weight: 785;
    --background-color: #000;
    --background-image: repeating-linear-gradient(
        transparent,
        transparent,
        #000 2px,
        #000 4px
      ),
      repeating-linear-gradient(
        90deg,
        transparent,
        transparent,
        #000 2px,
        #000 4px
      ),
      linear-gradient(to bottom, #007f0c 0.01%, #004306);
    --text-stroke-color: #000;
    --blend-color: #00cc14;
    --heart-contour: #00cc14;
  }
}