/*
 * Токены ALIMUSAEV (вариант А «Терминал»).
 * Все цвета сайта берутся отсюда. Глобальные цвета Elementor привязаны
 * к этим переменным, поэтому смена темы перекрашивает и виджеты Elementor.
 *
 * ID глобальных цветов Elementor (задаются скриптом kit-setup):
 *   ambg ─ фон, amsurf ─ поверхность, amfg ─ текст, ammuted ─ приглушённый,
 *   amline ─ линии, aminv ─ инверсный фон, aminvfg ─ текст на инверсном.
 *
 * Инверсные блоки (класс am-inv на контейнере): внутри них палитра
 * «переворачивается», поэтому виджеты с цветами AM Текст / AM Фон
 * сами становятся светлыми на тёмном и наоборот — ничего перекрашивать не нужно.
 */

/*
 * Палитра «матовая»: строго оттенки серого, но без чистых #000/#FFF.
 * Как у старых мониторов: тёмно-серое «стекло» и светло-серый текст,
 * а не белый на чёрном, — глаза не устают, ретро-характер сохраняется.
 */
:root,
:root[data-theme="light"] {
	color-scheme: light;
	--am-bg: #F1F1F1;
	--am-surface: #E8E8E8;
	--am-fg: #1A1A1A;
	--am-muted: #575757;
	--am-line: #D2D2D2;
	--am-grid: rgba(0, 0, 0, 0.055);
	--am-glow: rgba(255, 255, 255, 0.85);
	--am-inv: #1C1C1C;
	--am-inv-fg: #EDEDED;

	--am-font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
	--am-font-sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--am-wrap: 1240px;
	--am-gutter: 32px;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--am-bg: #161616;
	--am-surface: #1D1D1D;
	--am-fg: #E2E2E2;
	--am-muted: #9C9C9C;
	--am-line: #313131;
	--am-grid: rgba(255, 255, 255, 0.05);
	--am-glow: rgba(255, 255, 255, 0.045);
	--am-inv: #E2E2E2;
	--am-inv-fg: #161616;
}

/* Без JavaScript: следуем настройке системы */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme]) {
		color-scheme: dark;
		--am-bg: #161616;
		--am-surface: #1D1D1D;
		--am-fg: #E2E2E2;
		--am-muted: #9C9C9C;
		--am-line: #313131;
		--am-grid: rgba(255, 255, 255, 0.05);
		--am-glow: rgba(255, 255, 255, 0.045);
		--am-inv: #E2E2E2;
		--am-inv-fg: #161616;
	}
}

/* Палитра внутри инверсного блока в светлой теме: тёмный блок */
.am-inv > *,
:root[data-theme="light"] .am-inv > * {
	--am-bg: #1C1C1C;
	--am-surface: #242424;
	--am-fg: #EDEDED;
	--am-muted: #AFAFAF;
	--am-line: rgba(255, 255, 255, 0.18);
	--am-grid: rgba(255, 255, 255, 0.07);
	--am-glow: rgba(255, 255, 255, 0.04);
	--am-inv: #EDEDED;
	--am-inv-fg: #1C1C1C;
}

/* …и в тёмной теме: светлый блок */
:root[data-theme="dark"] .am-inv > * {
	--am-bg: #DCDCDC;
	--am-surface: #D0D0D0;
	--am-fg: #161616;
	--am-muted: #454545;
	--am-line: rgba(0, 0, 0, 0.18);
	--am-grid: rgba(0, 0, 0, 0.07);
	--am-glow: rgba(255, 255, 255, 0.5);
	--am-inv: #161616;
	--am-inv-fg: #DCDCDC;
}

@media (max-width: 640px) {
	:root { --am-gutter: 16px; }
}

/*
 * Режим чтения инструкций: «лист» на фоне страницы, текст чуть мягче заголовков.
 */
:root,
:root[data-theme="light"] {
	--am-read-page: #E8E8E8;
	--am-read-card: #F8F8F7;
	--am-read-fg: #222222;
	--am-read-muted: #585858;
	--am-read-line: #D3D3D3;
	--am-read-code: #EDEDED;
}
:root[data-theme="dark"] {
	--am-read-page: #161616;
	--am-read-card: #1E1E1E;
	--am-read-fg: #D2D2D2;
	--am-read-muted: #999999;
	--am-read-line: #333333;
	--am-read-code: #171717;
}

/*
 * Связка с Elementor. Kit пишет --e-global-color-* в правило .elementor-kit-N
 * на <body>; селектор ниже специфичнее (0,1,1 против 0,1,0), поэтому
 * побеждает в обеих темах. Внутри .am-inv связка объявлена заново, чтобы
 * взять «перевёрнутые» значения. Значения в самом Kit нужны только для палитры в редакторе.
 */
:root body,
.am-inv > * {
	--e-global-color-ambg: var(--am-bg);
	--e-global-color-amsurf: var(--am-surface);
	--e-global-color-amfg: var(--am-fg);
	--e-global-color-ammuted: var(--am-muted);
	--e-global-color-amline: var(--am-line);
	--e-global-color-aminv: var(--am-inv);
	--e-global-color-aminvfg: var(--am-inv-fg);

	/* Системные цвета Elementor тоже ведём за темой */
	--e-global-color-primary: var(--am-fg);
	--e-global-color-secondary: var(--am-muted);
	--e-global-color-text: var(--am-fg);
	--e-global-color-accent: var(--am-fg);
}