/*
 * Цветовые схемы сайта.
 *
 * Меняются только значения ролей из style.css: имена токенов одни и те же,
 * поэтому компоненты о схемах ничего не знают.
 *
 * Схема включается атрибутом data-scheme на <html> (его ставит
 * parts/functions/color-schemes.inc.php). Без атрибута — «как в системе».
 *
 * Роли:
 *   --c-surface           фон страницы
 *   --c-surface-subtle    подложка блоков
 *   --c-surface-inverse   брендовая тёмная полоса (шапка, подвал, плашка cookie)
 *   --c-on-inverse        текст на брендовой полосе
 *   --c-on-inverse-hover  фон кнопки на полосе при наведении
 *   --c-text              основной текст
 *   --c-text-muted        подписи и сноски
 *   --c-action            ссылки, активные пункты, обводка кнопок
 *   --c-action-strong     наведение и нажатие действия
 *   --c-on-action         текст на заливке действия
 *   --c-cta               заливка главной кнопки: запись, звонок
 *   --c-cta-strong        наведение и нажатие CTA
 *   --c-on-cta            текст на CTA
 *   --c-accent            акцент: рамки промо, метки (не текст и не CTA)
 *   --c-accent-soft       подложка промо-блока
 *   --c-accent-ink        текст на акцентной подложке
 *   --c-border            разделители и рамки-украшения
 *   --c-border-control    рамки кликабельных элементов (не ниже 3:1 к фону)
 *   --c-danger            ошибки
 *
 * Новая схема — новый блок ниже и строка в reab_schemes(). Контраст каждой пары
 * проверяется и попадает в okf/references/design-language.md.
 */

/* ==========================================================================
   Авто: схема не выбрана — повторяем системную настройку
   ========================================================================== */

@media (prefers-color-scheme: dark) {
	:root:not([data-scheme]) {
		color-scheme: dark;

		--c-action: #c09ee8;
		--c-action-strong: #dcc7f5;
		--c-on-action: #1a1224;
		--c-cta: #f0636f;
		--c-cta-strong: #f58a93;
		--c-on-cta: #1a1224;
		--c-accent: #f55060;
		--c-accent-soft: #3a1620;
		--c-accent-ink: #ffc9ce;
		--c-surface: #1a1224;
		--c-surface-subtle: #251a33;
		--c-surface-inverse: #120c1a;
		--c-surface-inverse-raised: #201531;
		--c-on-inverse: #f4f0fa;
		--c-on-inverse-hover: #e0d5ee;
		--c-border: #382a4a;
		--c-border-control: #6e5a88;
		--c-text: #f2eef8;
		--c-text-muted: #bdb3cd;
		--c-danger: #ff9e96;
	}
}

/* ==========================================================================
   Тёмная
   ========================================================================== */

:root[data-scheme="dark"] {
	color-scheme: dark;

	--c-action: #c09ee8;
	--c-action-strong: #dcc7f5;
	--c-on-action: #1a1224;
	--c-cta: #f0636f;
	--c-cta-strong: #f58a93;
	--c-on-cta: #1a1224;
	--c-accent: #f55060;
	--c-accent-soft: #3a1620;
	--c-accent-ink: #ffc9ce;
	--c-surface: #1a1224;
	--c-surface-subtle: #251a33;
	--c-surface-inverse: #120c1a;
	--c-surface-inverse-raised: #201531;
	--c-on-inverse: #f4f0fa;
	--c-on-inverse-hover: #e0d5ee;
	--c-border: #382a4a;
	--c-border-control: #6e5a88;
	--c-text: #f2eef8;
	--c-text-muted: #bdb3cd;
	--c-danger: #ff9e96;
}

/* ==========================================================================
   Новогодняя — пример тематической схемы.
   Включается по календарю (15 декабря — 15 января), пока посетитель не выбрал
   светлую или тёмную вручную. Ещё одна тематическая схема добавляется таким же
   блоком: меняются только значения ролей.
   ========================================================================== */

:root[data-scheme="newyear"] {
	color-scheme: light;

	--c-action: #135a35;
	--c-action-strong: #0b3d23;
	--c-on-action: #ffffff;
	--c-cta: #a3122f;
	--c-cta-strong: #7a0e23;
	--c-on-cta: #ffffff;
	--c-accent: #e8c547;
	--c-accent-soft: #fbf3d0;
	--c-accent-ink: #123b2a;
	--c-surface: #ffffff;
	--c-surface-subtle: #fbf3d9;
	--c-surface-inverse: #123b2a;
	--c-surface-inverse-raised: #175038;
	--c-on-inverse: #ffffff;
	--c-on-inverse-hover: #dcebe1;
	--c-border: #dccfb0;
	--c-border-control: #9a8c66;
	--c-text: #333333;
	--c-text-muted: #595959;
	--c-danger: #6e0a18;
}