/*
  Специально для светлой темы при наличии класса.
  Здесь окажутся стили, которые нужно переопределить принудительно,
  переключая тему
*/

.page.theme_light {
  --font-family: "IBM Plex Mono", sans-serif;
  --back-color: #fff1f7;
  --back-img: url(../images/cover-image-light.png);
  --accent-color: #ff8dcb;
  --main-title-color: #ffc2e6;
  --main-text-color: #353430;
  --default-color-text: #353430;
  --button-corner-main-section-title-color: #353430;
  --header-title-shadow-color: #ff0070;
  --button-hover-color: rgba(50, 49, 45, 0.4);
  --rec-visibility: none;
  /* сохраните этот селектор в приведённом виде.
    Так стили написанные ниже будут иметь больший вес,
    чем стили в медиазапросе предпочтений пользователя
  */
}

@media (prefers-color-scheme: light) {
  :root {
    --font-family: "IBM Plex Mono", sans-serif;
    --back-color: #fff1f7;
    --back-img: url(../images/cover-image-light.png);
    --accent-color: #ff8dcb;
    --main-title-color: #ffc2e6;
    --main-text-color: #353430;
    --default-color-text: #353430;
    --button-corner-main-section-title-color: #353430;
    --header-title-shadow-color: #ff0070;
    --button-hover-color: rgba(50, 49, 45, 0.4);
    --rec-visibility: none;
    /* Дублируем переменные светлой темы */
  }
}
