/*
 * Переключатель светлой/тёмной темы.
 *
 * Тёмная тема — значения из theme.json (по умолчанию).
 * Светлая тема — переопределяем те же CSS-переменные WordPress
 * под атрибутом html[data-theme="light"]. Так как блоки используют
 * var(--wp--preset--color--*), всё перекрашивается автоматически.
 */

:root {
	color-scheme: dark;
}

html[data-theme="light"] {
	color-scheme: light;

	--wp--preset--color--base: #ffffff;
	--wp--preset--color--surface: #f4f2fb;
	--wp--preset--color--contrast: #14102b;
	--wp--preset--color--muted: #6b6480;
	--wp--preset--color--border: #e4e0f0;
	--wp--preset--color--red: #cf2010;
	--wp--preset--color--yellow: #b58900;
	--wp--preset--color--lime: #6f9c00;
	--wp--preset--color--orange: #c86a10;
	--wp--preset--color--teal: #0f8d82;

	--wp--custom--page-glow: radial-gradient(120% 55% at 50% 100%, rgba(72,200,184,0.18), rgba(72,200,184,0) 70%);
	--wp--custom--card-shadow: 0 18px 50px rgba(20,16,43,0.12);
}

/* Мягкое бирюзовое свечение снизу страницы (как «вода» на макете). */
body {
	background-image: var(--wp--custom--page-glow);
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: bottom center;
	min-height: 100vh;
}

/* Кнопка-переключатель */
.theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border-radius: var(--wp--custom--radius--pill);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: transform 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.theme-toggle:hover {
	transform: translateY(-1px);
	border-color: var(--wp--preset--color--teal);
	color: var(--wp--preset--color--teal);
}

.theme-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
}

/* Тёмная тема: показываем солнце (переключить на светлую). */
html[data-theme="dark"] .theme-toggle__icon--moon,
html:not([data-theme="light"]) .theme-toggle__icon--moon {
	display: none;
}

/* Светлая тема: показываем луну. */
html[data-theme="light"] .theme-toggle__icon--sun {
	display: none;
}