/*
 * Общие переменные всех шаблонов. Подключать первым.
 * Под дизайн сайта меняются только значения здесь — сами шаблоны не трогать.
 */
:root {
	/* Цвета */
	--wt-primary: #1f3b2f;        /* основной: шапки окон, выбранное, активная вкладка */
	--wt-primary-2: #2d5443;      /* основной при наведении */
	--wt-on-primary: #ffffff;     /* текст на основном */
	--wt-accent: #e3a52b;         /* акцент: главная кнопка */
	--wt-accent-2: #d1941b;       /* акцент при наведении */
	--wt-on-accent: #1d2320;      /* текст на акценте */
	--wt-ink: #1d2320;            /* основной текст */
	--wt-muted: #5f6b65;          /* второстепенный текст (контраст 4.5+ на белом) */
	--wt-line: #e2e6e3;           /* линии и рамки */
	--wt-field: #c9d0cc;          /* рамка полей */
	--wt-paper: #f4f5f2;          /* фон подложек */
	--wt-bg: #ffffff;             /* фон окон и полей */
	--wt-danger: #c62828;         /* ошибки */
	--wt-ok: #1f7a45;             /* успех, «в корзине» */
	--wt-backdrop: rgba(16, 24, 20, .24);       /* затемнение за окном (с размытием) */
	--wt-backdrop-solid: rgba(16, 24, 20, .56); /* затемнение, если браузер не умеет размывать */

	/* Форма */
	--wt-font: inherit;           /* шрифт сайта */
	--wt-font-head: var(--wt-font); /* шрифт заголовков: по умолчанию тот же; пара для B2B — design/fonts/README.md */
	--wt-radius: 12px;            /* окна, панели */
	--wt-radius-sm: 8px;          /* кнопки, поля, строки */
	--wt-shadow: 0 12px 32px rgba(16, 24, 20, .14), 0 2px 8px rgba(16, 24, 20, .08); /* только у элементов поверх страницы */
	--wt-tap: 44px;               /* минимальная зона нажатия */
	--wt-field-h: 48px;           /* высота поля */

	/* Слои */
	--wt-z-panel: 60;             /* нижняя панель */
	--wt-z-drop: 70;              /* выпадающие списки, каталог-меню */
	--wt-z-float: 80;             /* чат */
	--wt-z-banner: 90;            /* баннер cookie */
	--wt-z-modal: 100;            /* окна */

	/* Высота нижней панели телефона — шаблон bottom-bar ставит сам. Плавающие элементы встают над ней */
	--wt-dock-h: 0px;
}

/* Заголовки — шрифтом заголовков (в паре Manrope + Inter это Manrope, весь остальной текст и интерфейс — Inter) */
h1, h2, h3, h4, .wt-h1, .wt-h2, .wt-h3, .wt-done__title { font-family: var(--wt-font-head); }

/* Окно не сдвигает страницу вбок: место под полосу прокрутки зарезервировано всегда */
html { scrollbar-gutter: stable; }

/* Общие кнопки шаблонов */
.wt-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: var(--wt-tap); padding: 0 24px; border: 1px solid transparent; border-radius: var(--wt-radius-sm);
	font-family: var(--wt-font); font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; cursor: pointer;
	transition: background-color .15s, border-color .15s, transform .05s;
}
.wt-btn:active { transform: translateY(1px); }
.wt-btn:disabled { opacity: .6; cursor: default; transform: none; }
.wt-btn--accent { background: var(--wt-accent); color: var(--wt-on-accent); }
.wt-btn--accent:hover:not(:disabled) { background: var(--wt-accent-2); } /* наведение — темнее, никогда не светлее */
.wt-btn--accent:active:not(:disabled) { filter: brightness(.93); } /* нажатие — ещё темнее (и на 1px ниже — .wt-btn:active) */
.wt-btn--line { background: var(--wt-bg); color: var(--wt-ink); border-color: var(--wt-field); }
.wt-btn--line:hover:not(:disabled) { border-color: var(--wt-ink); }

/* Скрытый текст для экранных дикторов */
.wt-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
	[class^="wt-"], [class*=" wt-"], [class^="wt-"]::backdrop { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}