@media (prefers-color-scheme: light) {
  body:has([data-template]) {
    --color-background: #FFFFFF; /* Цвет фона сайта */
  }

  [data-template] {
    --color-main: #DB1F2A; /* Основной */
    --color-wrapper: #F2F2F3; /* Цвет плашек */
    --color-fill: #E9E9E9; /* Цвет заливки */

    --color-title: #1E1E1E; /* Цвет заголовков секций */
    --color-text-main: #1E1E1E; /* Цвет текста */
    --color-text-additional: #9D9D9E; /* Цвет текста вспомогательный */
    --color-text-title-media: #1E1E1E; /* Цвет заголовка элеменов списка "Аудио список"/"Видео список" */
    --color-text-error: #FF5050; /* Цвет текста ошибки */
    --color-text-button: #FFFFFF; /* Цвет текста внутри кнопки */
    --color-expert-name: #1E1E1E; /* Секция "Экспертный совет", цвет имени эксперта */

    --font-weight-simple-text: 400; /* Вес простого текста (в описании, участниках, тесте и т.д.) */

    --font-weight-dates: 700; /* Даты проведения и статуса конкурса */
    --color-text-competition-status: #1E1E1E; /* Цвет статуса конкурса */
    --color-banner-dates-icon: var(--color-main); /* Иконка календаря */

    --color-steps: #DDDDDE; /* Цвет плашки контейнера "Шаги" */
    --color-steps-text: #B6B6B7; /* Цвет текста плашки контейнера "Шаги" */
    --font-weight-steps-number: 700; /* Вес текста цифр контейнера "Шаги" */
    --font-weight-steps-title: 700; /* Вес текста заголовков контейнера "Шаги" */

    --color-form-background: #F2F2F3; /* Цвет фона формы */
    --color-form-button: #E6E6E8; /* Цвет неактивной кнопки */
    --color-form-border: rgba(79, 128, 255, 0.1); /* Цвет обводки формы */
    --color-form-error-background: rgba(255, 80, 80, 0.05); /* Цвет фона ошибки формы */
    --color-form-error-border: #FF5050; /* Цвет текста ошибки формы */

    --color-heart-circle: #F0DDDF; /* Секция "Участники" кнопка сердца */
    --color-heart: var(--color-main); /* Секция "Участники" иконка сердца */
    --color-play-button-icon: #FFFFFF; /* Иконка кнопки плей/пауза */
    --color-text-participant: var(--color-main); /* Секция "Участники" цвет имени участника */
    --color-participant-button: #E6E6E8; /* Секция "Участники" цвет кнопки "подробнее" */
    --border-radius-participant-button: 10px; /* Секция "Участники" скругление кнопки "подробнее" */
    --font-weight-participant-button: 500; /* Секция "Участники" font-weight кнопки "подробнее" */

    --color-text-test-title: var(--color-main); /* Цвет текста подзаголовка в секциях "Тест" и "Викторина" */
    --font-weight-test-title: 700; /* font-weight подзаголовка в секциях "Тест" и "Викторина" */

    --color-text-table-header: #FFFFFF; /* Таблица "Результаты викторины" цвет текста шапки */
    --color-bg-table-header: var(--color-main); /* Таблица "Результаты викторины" цвет фона шапки */
    --font-weight-tableHeader: 700; /* Таблица "Результаты викторины" font-weight шапки */

    --color-nav-icon: var(--color-main); /* Цвет иконок кнопок пагинации (стрелочки в круге) */
    --font-weight-current-nav: 500; /* font-weight цифры активного пункта пагинатора */

    --border-radius-session-city: 10px; /* Секция "Сеансы" скругление кнопок городов */
    --color-text-session-city: #464647; /* Секция "Сеансы" цвет названий городов */
    --color-bg-session-city_active: #757A85; /* Секция "Сеансы" цвет кнопки выбранного города */
    --color-text-session-city_active: #FFFFFF; /* Секция "Сеансы" цвет названия выбранного города */
    --border-radius-session-time: 10px; /* Секция "Сеансы" скругление кнопок сеансов-времени */
    --color-text-session-time: #1E1E1E; /* Секция "Сеансы" скругление кнопок сеансов-времени */

    --border-radius-venue-city: 10px; /* Секция "Место проведения" скругление углов города */
    --color-bg-venue-city: #F2F2F3; /* Секция "Место проведения" цвет фона города */
    --color-text-venue-city: #1E1E1E; /* Секция "Место проведения" цвет текста города */
    --color-bg-venue-city_active: #757A85; /* Секция "Место проведения" цвет фона выбранного города */
    --color-text-venue-city_active: #FFFFFF; /* Секция "Место проведения" цвет текста выбранного города */
    --font-weight-venue-info: 400; /* Секция "Место проведения" дата, время и место */
    --color-icon-venue: var(--color-main); /* Секция "Место проведения" цвет иконок */

    --border-radius-winner-place: 10px; /* Секция "Победители" скругление места и кол-ва голосов */
    --color-bg-winner-votes: #E6E6E8; /* Секция "Победители" цвет фона кол-ва голосов */
    --color-text-winner-name: var(--color-main); /* Секция "Победители" цвет имени */
    --font-weight-winner-name: 700; /* Секция "Победители" font-weight имени */
    --font-weight-winner-city: 400; /* Секция "Победители" font-weight города */

    --border-radius: 0;
    --border-radius-button: 10px; /* border-radius кнопок */
    --border-radius-input: 10px; /* Скругление инпутов кнопок */
  }
}

@media (prefers-color-scheme: dark) {
  body:has([data-template]) {
    --color-background: #1A0F22; /* Цвет фона сайта */
  }

  [data-template] {
    --color-main: #DB1F2A; /* Основной */
    --color-wrapper: #302738; /* Цвет плашек */
    --color-fill: #302738; /* Цвет заливки */

    --color-title: #FFFFFF; /* Цвет заголовков секций */
    --color-text-main: #FFFFFF; /* Цвет текста */
    --color-text-additional: #837D88; /* Цвет текста вспомогательный */
    --color-text-title-media: #FFFFFF; /* Цвет заголовка элеменов списка "Аудио список"/"Видео список" */
    --color-text-error: #FF5050; /* Цвет текста ошибки */
    --color-text-button: #FFFFFF; /* Цвет текста внутри кнопки */
    --color-expert-name: #FFFFFF; /* Секция "Экспертный совет", цвет имени эксперта */

    --font-weight-simple-text: 400; /* Вес простого текста (в описании, участниках, тесте и т.д.) */

    --font-weight-dates: 700; /* Даты проведения и статуса конкурса */
    --color-text-competition-status: #FFFFFF; /* Цвет статуса конкурса */
    --color-banner-dates-icon: var(--color-main); /* Иконка календаря */

    --color-steps: #443C4C; /* Цвет плашки контейнера "Шаги" */
    --color-steps-text: #696370; /* Цвет текста плашки контейнера "Шаги" */
    --font-weight-steps-number: 700; /* Вес текста цифр контейнера "Шаги" */
    --font-weight-steps-title: 700; /* Вес текста заголовков контейнера "Шаги" */

    --color-form-background: #231A2C; /* Цвет фона формы */
    --color-form-button: #3D3748; /* Цвет неактивной кнопки */
    --color-form-border: rgba(255, 255, 255, 0.15); /* Цвет обводки формы */
    --color-form-error-background: rgba(255, 80, 80, 0.05); /* Цвет фона ошибки формы */
    --color-form-error-border: #FF5050; /* Цвет текста ошибки формы */

    --color-heart-circle: #412637; /* Секция "Участники" кнопка сердца */
    --color-heart: var(--color-main); /* Секция "Участники" иконка сердца */
    --color-play-button-icon: #FFFFFF; /* Иконка кнопки плей/пауза */
    --color-text-participant: #FFFFFF; /* Секция "Участники" цвет имени участника */
    --color-participant-button: #3D3748; /* Секция "Участники" цвет кнопки "подробнее" */
    --border-radius-participant-button: 10px; /* Секция "Участники" скругление кнопки "подробнее" */
    --font-weight-participant-button: 500; /* Секция "Участники" font-weight кнопки "подробнее" */

    --color-text-test-title: #FFFFFF; /* Цвет текста подзаголовка в секциях "Тест" и "Викторина" */
    --font-weight-test-title: 700; /* font-weight подзаголовка в секциях "Тест" и "Викторина" */

    --color-text-table-header: #FFFFFF; /* Таблица "Результаты викторины" цвет текста шапки */
    --color-bg-table-header: var(--color-main); /* Таблица "Результаты викторины" цвет фона шапки */
    --font-weight-tableHeader: 700; /* Таблица "Результаты викторины" font-weight шапки */

    --color-nav-icon: var(--color-main); /* Цвет иконок кнопок пагинации (стрелочки в круге) */
    --font-weight-current-nav: 500; /* font-weight цифры активного пункта пагинатора */

    --border-radius-session-city: 10px; /* Секция "Сеансы" скругление кнопок городов */
    --color-text-session-city: #FFFFFF; /* Секция "Сеансы" цвет названий городов */
    --color-bg-session-city_active: #5A5A67; /* Секция "Сеансы" цвет кнопки выбранного города */
    --color-text-session-city_active: #FFFFFF; /* Секция "Сеансы" цвет названия выбранного города */
    --border-radius-session-time: 10px; /* Секция "Сеансы" скругление кнопок сеансов-времени */
    --color-text-session-time: #D9D7DA; /* Секция "Сеансы" скругление кнопок сеансов-времени */

    --border-radius-venue-city: 10px; /* Секция "Место проведения" скругление углов города */
    --color-bg-venue-city: #3D3748; /* Секция "Место проведения" цвет фона города */
    --color-text-venue-city: #FFFFFF; /* Секция "Место проведения" цвет текста города */
    --color-bg-venue-city_active: #60616E; /* Секция "Место проведения" цвет фона выбранного города */
    --color-text-venue-city_active: #FFFFFF; /* Секция "Место проведения" цвет текста выбранного города */
    --font-weight-venue-info: 400; /* Секция "Место проведения" дата, время и место */
    --color-icon-venue: var(--color-main); /* Секция "Место проведения" цвет иконок */

    --border-radius-winner-place: 10px; /* Секция "Победители" скругление места и кол-ва голосов */
    --color-bg-winner-votes: #3D3748; /* Секция "Победители" цвет фона кол-ва голосов */
    --color-text-winner-name: var(--color-main); /* Секция "Победители" цвет имени */
    --font-weight-winner-name: 700; /* Секция "Победители" font-weight имени */
    --font-weight-winner-city: 400; /* Секция "Победители" font-weight города */

    --border-radius: 0;
    --border-radius-button: 10px; /* border-radius кнопок */
    --border-radius-input: 12px; /* Скругление инпутов кнопок */
  }
}

@media only screen and (max-width: 1440px) {

  [data-template] {
    --border-radius: 0;
  }

}

@media only screen and (max-width: 1024px) {

  [data-template] {
    --border-radius: 0;
  }

}

:root.light-theme body:has([data-template]) {
  --color-background: #FFFFFF; /* Цвет фона сайта */
}

:root.light-theme [data-template] {
  --color-main: #DB1F2A; /* Основной */
  --color-wrapper: #F2F2F3; /* Цвет плашек */
  --color-fill: #E9E9E9; /* Цвет заливки */

  --color-title: #1E1E1E; /* Цвет заголовков секций */
  --color-text-main: #1E1E1E; /* Цвет текста */
  --color-text-additional: #9D9D9E; /* Цвет текста вспомогательный */
  --color-text-title-media: #1E1E1E; /* Цвет заголовка элементов списка "Аудио список"/"Видео список" */
  --color-text-error: #FF5050; /* Цвет текста ошибки */
  --color-text-button: #FFFFFF; /* Цвет текста внутри кнопки */
  --color-expert-name: #1E1E1E; /* Секция "Экспертный совет", цвет имени эксперта */

  --font-weight-simple-text: 400; /* Вес простого текста (в описании, участниках, тесте и т.д.) */

  --font-weight-dates: 700; /* Даты проведения и статуса конкурса */
  --color-text-competition-status: #1E1E1E; /* Цвет статуса конкурса */
  --color-banner-dates-icon: var(--color-main); /* Иконка календаря */

  --color-steps: #DDDDDE; /* Цвет плашки контейнера "Шаги" */
  --color-steps-text: #B6B6B7; /* Цвет текста плашки контейнера "Шаги" */
  --font-weight-steps-number: 700; /* Вес текста цифр контейнера "Шаги" */
  --font-weight-steps-title: 700; /* Вес текста заголовков контейнера "Шаги" */

  --color-form-background: #F2F2F3; /* Цвет фона формы */
  --color-form-button: #E6E6E8; /* Цвет неактивной кнопки */
  --color-form-border: rgba(79, 128, 255, 0.1); /* Цвет обводки формы */
  --color-form-error-background: rgba(255, 80, 80, 0.05); /* Цвет фона ошибки формы */
  --color-form-error-border: #FF5050; /* Цвет текста ошибки формы */

  --color-heart-circle: #F0DDDF; /* Секция "Участники" кнопка сердца */
  --color-heart: var(--color-main); /* Секция "Участники" иконка сердца */
  --color-play-button-icon: #FFFFFF; /* Иконка кнопки плей/пауза */
  --color-text-participant: var(--color-main); /* Секция "Участники" цвет имени участника */
  --color-participant-button: #E6E6E8; /* Секция "Участники" цвет кнопки "подробнее" */
  --border-radius-participant-button: 10px; /* Секция "Участники" скругление кнопки "подробнее" */
  --font-weight-participant-button: 500; /* Секция "Участники" font-weight кнопки "подробнее" */

  --color-text-test-title: var(--color-main); /* Цвет текста подзаголовка в секциях "Тест" и "Викторина" */
  --font-weight-test-title: 700; /* font-weight подзаголовка в секциях "Тест" и "Викторина" */

  --color-text-table-header: #FFFFFF; /* Таблица "Результаты викторины" цвет текста шапки */
  --color-bg-table-header: var(--color-main); /* Таблица "Результаты викторины" цвет фона шапки */
  --font-weight-tableHeader: 700; /* Таблица "Результаты викторины" font-weight шапки */

  --color-nav-icon: var(--color-main); /* Цвет иконок кнопок пагинации (стрелочки в круге) */
  --font-weight-current-nav: 500; /* font-weight цифры активного пункта пагинатора */

  --border-radius-session-city: 10px; /* Секция "Сеансы" скругление кнопок городов */
  --color-text-session-city: #464647; /* Секция "Сеансы" цвет названий городов */
  --color-bg-session-city_active: #757A85; /* Секция "Сеансы" цвет кнопки выбранного города */
  --color-text-session-city_active: #FFFFFF; /* Секция "Сеансы" цвет названия выбранного города */
  --border-radius-session-time: 10px; /* Секция "Сеансы" скругление кнопок сеансов-времени */
  --color-text-session-time: #1E1E1E; /* Секция "Сеансы" скругление кнопок сеансов-времени */

  --border-radius-venue-city: 10px; /* Секция "Место проведения" скругление углов города */
  --color-bg-venue-city: #F2F2F3; /* Секция "Место проведения" цвет фона города */
  --color-text-venue-city: #1E1E1E; /* Секция "Место проведения" цвет текста города */
  --color-bg-venue-city_active: #757A85; /* Секция "Место проведения" цвет фона выбранного города */
  --color-text-venue-city_active: #FFFFFF; /* Секция "Место проведения" цвет текста выбранного города */
  --font-weight-venue-info: 400; /* Секция "Место проведения" дата, время и место */
  --color-icon-venue: var(--color-main); /* Секция "Место проведения" цвет иконок */

  --border-radius-winner-place: 10px; /* Секция "Победители" скругление места и кол-ва голосов */
  --color-bg-winner-votes: #E6E6E8; /* Секция "Победители" цвет фона кол-ва голосов */
  --color-text-winner-name: var(--color-main); /* Секция "Победители" цвет имени */
  --font-weight-winner-name: 700; /* Секция "Победители" font-weight имени */
  --font-weight-winner-city: 400; /* Секция "Победители" font-weight города */

  --border-radius: 0;
  --border-radius-button: 10px; /* border-radius кнопок */
  --border-radius-input: 10px; /* Скругление инпутов кнопок */
}

:root.dark-theme body:has([data-template]) {
  --color-background: #1A0F22; /* Цвет фона сайта */
}

:root.dark-theme [data-template] {
  --color-main: #DB1F2A; /* Основной */
  --color-wrapper: #302738; /* Цвет плашек */
  --color-fill: #302738; /* Цвет заливки */

  --color-title: #FFFFFF; /* Цвет заголовков секций */
  --color-text-main: #FFFFFF; /* Цвет текста */
  --color-text-additional: #837D88; /* Цвет текста вспомогательный */
  --color-text-title-media: #FFFFFF; /* Цвет заголовка элементов списка "Аудио список"/"Видео список" */
  --color-text-error: #FF5050; /* Цвет текста ошибки */
  --color-text-button: #FFFFFF; /* Цвет текста внутри кнопки */
  --color-expert-name: #FFFFFF; /* Секция "Экспертный совет", цвет имени эксперта */

  --font-weight-simple-text: 400; /* Вес простого текста (в описании, участниках, тесте и т.д.) */

  --font-weight-dates: 700; /* Даты проведения и статуса конкурса */
  --color-text-competition-status: #FFFFFF; /* Цвет статуса конкурса */
  --color-banner-dates-icon: var(--color-main); /* Иконка календаря */

  --color-steps: #443C4C; /* Цвет плашки контейнера "Шаги" */
  --color-steps-text: #696370; /* Цвет текста плашки контейнера "Шаги" */
  --font-weight-steps-number: 700; /* Вес текста цифр контейнера "Шаги" */
  --font-weight-steps-title: 700; /* Вес текста заголовков контейнера "Шаги" */

  --color-form-background: #231A2C; /* Цвет фона формы */
  --color-form-button: #3D3748; /* Цвет неактивной кнопки */
  --color-form-border: rgba(255, 255, 255, 0.15); /* Цвет обводки формы */
  --color-form-error-background: rgba(255, 80, 80, 0.05); /* Цвет фона ошибки формы */
  --color-form-error-border: #FF5050; /* Цвет текста ошибки формы */

  --color-heart-circle: #412637; /* Секция "Участники" кнопка сердца */
  --color-heart: var(--color-main); /* Секция "Участники" иконка сердца */
  --color-play-button-icon: #FFFFFF; /* Иконка кнопки плей/пауза */
  --color-text-participant: #FFFFFF; /* Секция "Участники" цвет имени участника */
  --color-participant-button: #3D3748; /* Секция "Участники" цвет кнопки "подробнее" */
  --border-radius-participant-button: 10px; /* Секция "Участники" скругление кнопки "подробнее" */
  --font-weight-participant-button: 500; /* Секция "Участники" font-weight кнопки "подробнее" */

  --color-text-test-title: #FFFFFF; /* Цвет текста подзаголовка в секциях "Тест" и "Викторина" */
  --font-weight-test-title: 700; /* font-weight подзаголовка в секциях "Тест" и "Викторина" */

  --color-text-table-header: #FFFFFF; /* Таблица "Результаты викторины" цвет текста шапки */
  --color-bg-table-header: var(--color-main); /* Таблица "Результаты викторины" цвет фона шапки */
  --font-weight-tableHeader: 700; /* Таблица "Результаты викторины" font-weight шапки */

  --color-nav-icon: var(--color-main); /* Цвет иконок кнопок пагинации (стрелочки в круге) */
  --font-weight-current-nav: 500; /* font-weight цифры активного пункта пагинатора */

  --border-radius-session-city: 10px; /* Секция "Сеансы" скругление кнопок городов */
  --color-text-session-city: #FFFFFF; /* Секция "Сеансы" цвет названий городов */
  --color-bg-session-city_active: #5A5A67; /* Секция "Сеансы" цвет кнопки выбранного города */
  --color-text-session-city_active: #FFFFFF; /* Секция "Сеансы" цвет названия выбранного города */
  --border-radius-session-time: 10px; /* Секция "Сеансы" скругление кнопок сеансов-времени */
  --color-text-session-time: #D9D7DA; /* Секция "Сеансы" скругление кнопок сеансов-времени */

  --border-radius-venue-city: 10px; /* Секция "Место проведения" скругление углов города */
  --color-bg-venue-city: #3D3748; /* Секция "Место проведения" цвет фона города */
  --color-text-venue-city: #FFFFFF; /* Секция "Место проведения" цвет текста города */
  --color-bg-venue-city_active: #60616E; /* Секция "Место проведения" цвет фона выбранного города */
  --color-text-venue-city_active: #FFFFFF; /* Секция "Место проведения" цвет текста выбранного города */
  --font-weight-venue-info: 400; /* Секция "Место проведения" дата, время и место */
  --color-icon-venue: var(--color-main); /* Секция "Место проведения" цвет иконок */

  --border-radius-winner-place: 10px; /* Секция "Победители" скругление места и кол-ва голосов */
  --color-bg-winner-votes: #3D3748; /* Секция "Победители" цвет фона кол-ва голосов */
  --color-text-winner-name: var(--color-main); /* Секция "Победители" цвет имени */
  --font-weight-winner-name: 700; /* Секция "Победители" font-weight имени */
  --font-weight-winner-city: 400; /* Секция "Победители" font-weight города */

  --border-radius: 0;
  --border-radius-button: 10px; /* border-radius кнопок */
  --border-radius-input: 12px; /* Скругление инпутов кнопок */
}