/*
  Специально для тёмной темы при наличии класса,
  здесь окажутся стили, которые нужно переопределить принудительно,
  переключая тему
*/
:root .theme_dark {
  --accent-color: #FF0070;
  --bg-color: #000028;
  
  --header__title-color: #DB00FF;
  --header__title-shadow: #FF0070;

  --title-color: #FF0070;
  --subtitle-color: #000028;
  --text-color: #F1B2CE;
  
  --main-font: 'IBM Plex mono';

  --grid-gap-static: 20px;
  --grid-gap-variadle: 20px;

  --page-background-image: url(../images/cover-image-dark.png);
  --button-hover__border-color:rgba(255, 0, 112, 0.4);

  --header__rec-display: block;
  --title-accent__font-size: clamp(7.5rem, 0.5625rem + 14.4531vw, 9.8125rem);
}

@media (width < 768px) {
  :root .theme_dark {
    --grid-gap-variadle: 10px;
    --title-accent__font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --accent-color: #FF0070;
    --bg-color: #000028;
    
    --header__title-color: #DB00FF;
    --header__title-shadow: #FF0070;
  
    --title-color: #FF0070;
    --subtitle-color: #000028;
    --text-color: #F1B2CE;
    
    --main-font: 'IBM Plex mono';

    --grid-gap-static: 20px;
    --grid-gap-variadle: 20px;

    --page-background-image: url(../images/cover-image-dark.png);
    --button-hover__border-color:rgba(255, 0, 112, 0.4);

    --header__rec-display: block;
    --title-accent__font-size: clamp(7.5rem, 0.5625rem + 14.4531vw, 9.8125rem);
  }

  @media (width < 768px) {
    :root {
      --grid-gap-variadle: 10px;
      --title-accent__font-size: clamp(7.25rem, 7.0115rem + 1.0178vw, 7.5rem);
    }
  }
}

.page.theme_dark {
  /* сохраните этот селектор в приведённом виде.
    Так стили написанные ниже будут иметь больший вес,
    чем стили в медиазапросе предпочтений пользователя
  */
}