/*
	Токены Ореола. Сырые значения живут только здесь.
	Светлая тема — основная; тёмная приходит вторым аргументом light-dark().
*/

:root {
	color-scheme: light dark;
	/* Разрешает анимировать высоту от нуля к auto — на этом держится
	   плавное раскрытие вопросов и разворотов. */
	interpolate-size: allow-keywords;

	/* --- Зелёная шкала бренда (Contour Green) --- */
	--green-50: #eefbf3;
	--green-100: #d3f5e1;
	--green-200: #a9ebc6;
	--green-300: #74dea6;
	--green-400: #3fd08a;
	--green-500: #17c27a;
	--green-600: #0fa86c;
	--green-700: #0d8657;
	--green-800: #0e5f40;
	--green-900: #0f2b22;

	/* --- Аврора: lime → green → cyan → blue. Розового нет. --- */
	--aurora-lime: #d4f58a;
	--aurora-green: #7fe0a8;
	--aurora-mint: #a8f0d8;
	--aurora-cyan: #6fd9e8;
	--aurora-sky: #8fc7ff;
	--aurora-blue: #5b8def;
	--aurora-deep: #2a4bd8;

	/* --- Нейтральные с зелёным подтоном --- */
	--ink-950: #06100c;
	--ink-900: #0a1610;
	--ink-850: #0e1d16;
	--ink-800: #13251d;
	--ink-700: #1b3128;
	--ink-600: #27413a;
	--ink-500: #3a5349;
	--ink-400: #5c7268;
	--ink-300: #869a91;
	--ink-200: #b3c2bb;
	--ink-100: #d7e0db;
	--ink-50: #eff3f1;
	--white: #ffffff;
	--black: #050807;

	/* --- Поверхности: максимум два тона на экран --- */
	--color-background: light-dark(#eef1ef, var(--black));
	--color-surface: light-dark(var(--white), var(--ink-850));
	--color-surface-2: light-dark(#f3f5f4, var(--ink-800));
	--color-surface-inset: light-dark(#e8ecea, var(--ink-700));
	--color-surface-deep: light-dark(var(--green-900), var(--ink-950));
	--color-glass: light-dark(rgb(255 255 255 / 62%), rgb(14 26 20 / 72%));

	--color-border: light-dark(rgb(10 22 16 / 8%), rgb(255 255 255 / 7%));
	--color-border-strong: light-dark(rgb(10 22 16 / 14%), rgb(255 255 255 / 14%));

	/* --- Текст --- */
	--color-text: light-dark(var(--ink-900), #f3f7f4);
	--color-text-secondary: light-dark(#4b5e55, #a9b8b0);
	/* Подобрано под контраст 4.5:1 на всех поверхностях — мелкий текст. */
	--color-text-muted: light-dark(#5f7066, #7d9088);
	--color-text-inverse: light-dark(var(--white), var(--ink-900));

	/* --- Действие --- */
	--color-accent: light-dark(var(--green-500), var(--green-400));
	--color-accent-hover: light-dark(var(--green-600), #56d99a);
	--color-accent-press: light-dark(var(--green-700), #2fbf7e);
	--color-accent-contrast: light-dark(var(--white), var(--ink-950));
	--color-accent-soft: light-dark(rgb(23 194 122 / 10%), rgb(63 208 138 / 12%));
	--color-accent-text: light-dark(var(--green-700), var(--green-400));

	/* --- Поля света: градиент только для CTA и hero-акцентов, не для фонов --- */
	/* Пятна намеренно шире самого блока и почти прозрачные: цвет должен
	   меняться так медленно, чтобы глаз не находил у него границ. */
	--field-light: radial-gradient(
			125% 95% at 16% 100%,
			rgb(212 245 138 / 30%) 0%,
			transparent 76%
		),
		/* Ровная подсветка всего поля. Её цвет и сила сняты с того, как
		   поле выглядело раньше: два пятна тогда из-за ошибки в размерах
		   рисовались мелкой плиткой и давали этот оттенок — вместе со
		   строками. Оттенок оставлен, строк нет. */
		linear-gradient(
			to right,
			rgb(135 204 248 / 10.1%),
			rgb(133 205 247 / 11.3%) 25%,
			rgb(131 204 244 / 11.9%) 50%,
			rgb(133 205 247 / 11.3%) 75%,
			rgb(135 204 248 / 10.1%)
		);
	--field-bloom: radial-gradient(
		60% 60% at 50% 45%,
		rgb(212 245 138 / 85%) 0%,
		rgb(168 240 216 / 60%) 35%,
		rgb(111 217 232 / 40%) 60%,
		rgb(91 141 239 / 25%) 85%,
		transparent 100%
	);
	/* Сглаживание ступеней. В 8 битах длинная пологая заливка неизбежно
	   ложится полосами: соседние пиксели попадают в один и тот же уровень.
	   Слоёв два: первый размазывает границу по горизонтали, второй —
	   по вертикали. С одним только первым горизонтальные полосы оставались:
	   вдоль вертикали он повторяет одно и то же значение.
	   Амплитуда — около деления яркости, текстуры не видно. Второй слой
	   вдвое тише первого: он строчный, и в полную силу на тёмном фоне
	   читался как развёртка старого экрана. */
	--dither: repeating-conic-gradient(
			rgb(255 255 255 / 0.9%) 0% 25%,
			rgb(255 255 255 / 0.3%) 0% 50%,
			rgb(0 0 0 / 0.3%) 0% 75%,
			rgb(0 0 0 / 0.9%) 0% 100%
		),
		repeating-linear-gradient(
			to bottom,
			rgb(255 255 255 / 0.45%) 0 1px,
			rgb(0 0 0 / 0.15%) 1px 2px,
			rgb(255 255 255 / 0.15%) 2px 3px,
			rgb(0 0 0 / 0.45%) 3px 4px
		);
	--dither-size: 2px 2px, 100% 4px;
	/* Сглаживание кладётся отдельным слоем поверх поля (::after), а не в тот
	   же список фонов: у списка размеров фонов своя очерёдность, и при
	   несовпадении числа слоёв размеры сдвигаются на чужие слои. */

	/* Свет в шапке подстраницы. Отдельно от --field-light: там свет идёт
	   снизу (под окно на главной), а здесь он должен стоять за заголовком. */
	--field-page: radial-gradient(
			80% 110% at 50% -6%,
			rgb(212 245 138 / 26%) 0%,
			transparent 68%
		),
		/* Подсветка всего поля, сильнее справа — тот же оттенок, что раньше
		   давали два пятна мелкой плиткой (см. --field-light). */
		linear-gradient(
			to right,
			rgb(143 198 253 / 3.8%) 0 37.5%,
			rgb(133 204 247 / 5.3%) 50%,
			rgb(127 208 242 / 7.5%) 62.5%,
			rgb(124 210 240 / 9.5%) 75%,
			rgb(122 210 238 / 11%) 87.5%,
			rgb(122 210 239 / 10.9%)
		);

	--gradient-aurora: linear-gradient(
		100deg,
		var(--aurora-lime) 0%,
		var(--aurora-green) 30%,
		var(--aurora-cyan) 65%,
		var(--aurora-blue) 100%
	);

	/* --- Гарнитуры --- */
	--font-display: "Bona Nova", Georgia, serif;
	--font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* --- Размеры: текучие, без брейкпоинтов --- */
	--text-display-xl: clamp(2rem, 3.6vw, 3.5rem);
	--text-display-l: clamp(1.875rem, 3.2vw, 2.875rem);
	--text-display-m: clamp(1.375rem, 1.9vw, 1.75rem);
	--text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
	--text-base: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;

	--fw-regular: 400;
	--fw-medium: 500;
	--fw-semibold: 600;

	--lh-tight: 1.04;
	--lh-snug: 1.16;
	--lh-normal: 1.5;

	--ls-display: -0.045em;
	--ls-body: -0.01em;
	--ls-eyebrow: 0.02em; /* бренд-кит: трекинг всегда плотный */

	/* --- Ритм --- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;


	/* --- Фактура ---
	   Зерно поверх всей страницы и лёгкий зелёный подмес в плоскостях:
	   без них интерфейс читается стерильно-белым. */
	/* Зерно — отдельный слой фона внутри самой плоскости: не блендится
	   с прокручиваемой страницей и поэтому ничего не стоит при прокрутке.
	   feColorMatrix обесцвечивает его: иначе турбулентность даёт цветные точки. */
	--noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.19'/%3E%3C/svg%3E");

	/* Подсветки плоскостей. Идут с разных сторон, чтобы плиты на странице
	   не выглядели штампованными одна с другой. */
	--tint-corner:
		radial-gradient(
			125% 105% at 0% 0%,
			color-mix(in srgb, var(--aurora-green) 26%, var(--color-surface)) 0%,
			var(--color-surface) 58%
		);
	--tint-bottom:
		radial-gradient(
			135% 115% at 50% 122%,
			color-mix(in srgb, var(--aurora-green) 30%, var(--color-surface)) 0%,
			var(--color-surface) 64%
		);
	--tint-right:
		radial-gradient(
			115% 135% at 110% 35%,
			color-mix(in srgb, var(--aurora-cyan) 26%, var(--color-surface)) 0%,
			var(--color-surface) 62%
		);
	--tint-iris:
		radial-gradient(
			120% 130% at 4% 112%,
			color-mix(in srgb, var(--aurora-lime) 34%, var(--color-surface)) 0%,
			transparent 56%
		),
		radial-gradient(
			115% 125% at 104% 22%,
			color-mix(in srgb, var(--aurora-sky) 34%, var(--color-surface)) 0%,
			transparent 58%
		),
		linear-gradient(var(--color-surface), var(--color-surface));

	/* Старые имена оставлены: на них ссылаются отдельные блоки. */

	/* --- Тона для карточек-лент -------------------------------------------
	   Сайт держится на одном зелёном, и от этого страница читается плоско.
	   Тона нужны там, где рядом стоят несколько равных по весу карточек:
	   цвет различает их быстрее, чем заголовок. Светлая тема — мягкая
	   подложка с обычным текстом, тёмная — глубокая заливка.
	--------------------------------------------------------------------- */
	--tone-sand: light-dark(#f6ecd8, #2b2317);
	--tone-sand-deep: light-dark(#efdfbf, #362b19);
	--tone-sand-ink: light-dark(#7a5716, #e9cf9c);

	--tone-iris: light-dark(#e6eafc, #191f3a);
	--tone-iris-deep: light-dark(#d7ddf8, #212a4c);
	--tone-iris-ink: light-dark(#33438f, #a9bdf5);

	--tone-leaf: light-dark(#ddf3e7, #10261c);
	--tone-leaf-deep: light-dark(#c9ebd8, #143024);
	--tone-leaf-ink: light-dark(#0a6b46, #6fdaa5);

	--tone-clay: light-dark(#fae7e2, #2e1d18);
	--tone-clay-deep: light-dark(#f4d6ce, #3a241d);
	--tone-clay-ink: light-dark(#93412c, #f0b4a2);

	--tone-sky: light-dark(#dcf0f7, #10262e);
	--tone-sky-deep: light-dark(#c7e6f2, #143039);
	--tone-sky-ink: light-dark(#0f5d76, #7fd3ea);

	--tone-lilac: light-dark(#eee6f8, #241a33);
	--tone-lilac-deep: light-dark(#e3d6f3, #2d2141);
	--tone-lilac-ink: light-dark(#5b3a8e, #c4a8f0);

	/* Нейтральный серый — для обложек в цветах бренда (без тёплых тонов). */
	--tone-mist: light-dark(#e9eef0, #151b1f);
	--tone-mist-deep: light-dark(#dbe3e6, #1c2429);
	--tone-mist-ink: light-dark(#3f515a, #b6c4cb);


	/* --- Виджеты --------------------------------------------------------
	   Карточка чуть светлее страницы, панель внутри — ещё светлее: так
	   читается «приложение, лежащее на карточке». Сигнальные цвета — ярче
	   мягких тонов: это значки и статусы, им нужен контраст. */
	--wcard: light-dark(#f6f8f7, #080a0e);
	--wpanel: light-dark(#ffffff, #10141a);
	--wpanel-border: light-dark(rgb(10 22 16 / 7%), rgb(255 255 255 / 7%));
	--wpanel-shadow:
		0 1px 2px light-dark(rgb(10 22 16 / 4%), rgb(0 0 0 / 35%)),
		0 14px 34px -18px light-dark(rgb(10 22 16 / 22%), rgb(0 0 0 / 70%));
	--sig-green: light-dark(#16b86f, #34d399);
	--sig-amber: light-dark(#f09a17, #f5b544);
	--sig-red: light-dark(#e8483a, #ff6b5d);
	--sig-blue: light-dark(#2f7cf6, #5fb2ff);
	--sig-violet: light-dark(#7c5cf0, #a58bff);
	--sig-grey: light-dark(#6b7780, #7d8c9c);

	--surface-tint: var(--tint-corner);
	--surface-tint-cool: var(--tint-iris);

	/* Знак логотипа и лепестки Люма — отдельными токенами: в тёмной теме
	   бренд уходит в синее, и перекрашивать нужно в одном месте. Знак —
	   переход по диагонали от светлого к тёмному, как в файле логотипа. */
	--logo-mark-light: #00c772;
	--logo-mark-dark: #005e36;
	/* Плашка знака — скруглённый квадрат, как иконка приложения. */
	--logo-tile: #ffffff;
	--logo-tile-edge: rgb(10 22 16 / 12%);
	--lum-petal-1: var(--aurora-green);
	--lum-petal-2: var(--green-300);
	--lum-petal-3: var(--aurora-mint);
	--lum-petal-4: var(--green-100);
	/* Тёмная плита «Узнаёте ситуацию?»: тёплое свечение слева. */
	--plate-glow: rgb(0 199 114 / 22%);
	--plate-base: #0a1610;
	--plate-accent: #5fe3a1;

	/* Зелёный для мелкого текста: тёмнее акцентного, иначе не проходит по контрасту. */
	--color-accent-ink: light-dark(#0b7a4f, #3fd08a);
	--header-h: 79px;

	/* Плавающие островки шапки: стекло, через которое видно страницу. */
	--island-bg: light-dark(rgb(255 255 255 / 0.94), rgb(16 31 24 / 0.94));
	--island-border: light-dark(rgb(10 22 16 / 0.08), rgb(243 247 244 / 0.1));
	--nav-dur: 420ms;
	/* Сжатие шапки в островок: одна длительность и одна кривая на все
	   свойства, иначе части полосы приезжают вразнобой. */
	/* Такт живых виджетов: три стадии, которые сменяются у всех разом.
	   Стадия длится треть такта; её первые ~0,6 с — смена, дальше все
	   стоят. Раскладка в ключевых кадрах одна на весь сайт:
	     0 → 7 %         — переход в первую стадию (он же сброс),
	     33,33 → 40,33 % — переход во вторую,
	     66,67 → 73,67 % — переход в третью. */
	--beat: 5.4s;
	--stage: calc(var(--beat) / 3);
	--island-dur: 380ms;
	--island-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--nav-ease: cubic-bezier(0.22, 0.9, 0.22, 1);
	--island-shadow: 0 6px 20px light-dark(rgb(10 22 16 / 0.08), rgb(0 0 0 / 0.35));
	--container: 1520px;
	--container-text: 68ch;
	--gutter: clamp(18px, 3vw, 40px);
	/* На телефоне блоки ближе: пальцем листают быстрее, чем крутят колесо.
	   С 933px ширины — как раньше. */
	--section-gap: clamp(44px, 6vw, 104px);

	/* --- Форма: всё круглое, контролы — пилюли --- */
	--radius-sm: 12px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-xl: 32px;
	--radius-2xl: 44px;
	--radius-pill: 999px;

	--blur-glass: 36px;
	--shadow-glass: inset 0 1px 0 light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 7%));
	--ring-focus: 0 0 0 3px light-dark(rgb(23 194 122 / 32%), rgb(63 208 138 / 32%));

	/* --- Цвета живых виджетов и деталей ---
	   Раньше были записаны прямо в компонентах. Плотность (прозрачность)
	   компонент задаёт сам через color-mix, цвет берёт отсюда. */

	/* Светлый текст на всегда тёмных плашках: быстрые ответы, подсказки. */
	--on-deep: #f3f7f4;

	/* Тёмное «устройство» в виджетах — одинаковое в обеих темах. */
	--device-bg: #040506;
	--device-tile: #111317;
	--device-tile-lift: #1b1e23;
	--device-tile-on: #22262c;
	--device-text: #f4f6f8;
	--device-text-muted: #8d949d;
	--device-edge: light-dark(transparent, rgb(255 255 255 / 0.07));
	--device-shadow: 0 28px 50px -30px rgb(0 0 0 / 0.55);

	/* Видоискатель камеры: темнота вокруг листа и сам лист. */
	--cam-glow: #2a3139;
	--cam-dark: #0e1216;
	--cam-paper: #dfe3dd;
	--cam-ink: #7f8a85;
	--cam-ink-soft: #a9b1ad;

	/* Бумага: миниатюры листов в виджетах загрузки. */
	--paper: light-dark(#fff, #1b2027);

	/* Янтарный текст предупреждений в виджетах загрузки. */
	--amber-ink: light-dark(#a15c00, #f5b454);
	--amber-ink-strong: light-dark(#8a4d00, #f5b454);

	/* Глаза Люма: днём мятные, ночью голубые; у аватарки — светлее. */
	--lum-eye: light-dark(#a9e9d5, #a9d3ff);
	--lum-eye-bright: light-dark(#c9fbea, #bfe0ff);

	/* Свет за большим Люмом в стартовом блоке. */
	--lum-glow: light-dark(rgb(168 240 216 / 42%), rgb(95 178 255 / 16%));
	--lum-glow-halo: light-dark(rgb(143 199 255 / 18%), rgb(95 178 255 / 7%));

	/* Иллюстрации — в материале Люма: глянцевая белая «бумага» с толщиной,
	   мятные детали с тёмной кромкой и бликом. Одинаковые в обеих темах,
	   как сам Люм. Градиенты из них — в components/art-defs.njk. */
	--art-paper: #ffffff;
	--art-paper-shade: #e8eef0;
	--art-paper-edge: #d3dfdd;
	--art-paper-depth: #c5d4d3;
	--art-line: #d8e2e3;
	--art-line-strong: #b4c5c9;
	--art-mint: #86e3ca;
	--art-mint-deep: #36ad90;
	--art-mint-edge: #2f9d82;
	--art-mint-depth: #22806a;
	--art-mint-soft: #d9f5ec;
	/* Свет за рисунком: днём мятный, ночью приглушённый синий. */
	--art-glow: light-dark(#d9f5ec, #1a3044);
	--art-sky: #b9dcff;
	--art-sky-deep: #5b9ff0;
	--art-sky-depth: #3f7fce;
	--art-sky-soft: #e3f0ff;
	--art-ink: #3c4b57;
	/* Стекло пробирок и лупы — полупрозрачный белый. */
	--art-glass: rgb(255 255 255 / 55%);
	/* Светлое пятно за сценой обложки: ночью почти не видно. */
	--art-spot: light-dark(rgb(255 255 255 / 72%), rgb(255 255 255 / 6%));
	--art-shadow: #2e5a50;

	/* Тени: чистый чёрный (--black у сайта с оттенком) и глубокий зелёный
	   для мягких теней и затемнений в светлой теме. */
	--shadow-color: #000;
	--shade-deep: #0a1610;

	/* --- Движение --- */
	--dur-fast: 160ms;
	--dur-base: 240ms;
	--dur-slow: 400ms;
	--dur-ambient: 6s;
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Выбор пользователя перекрывает системную тему. */
:root[data-theme="light"] {
	color-scheme: light;
	/* Зелёный для мелкого текста: тёмнее акцентного, иначе не проходит по контрасту. */
	--color-accent-ink: light-dark(#0b7a4f, #3fd08a);
}

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


	/* В тёмной теме свет складывается с фоном (screen у самого элемента),
	   поэтому цвета берём насыщенные, а не приглушённые: приглушённые
	   на чёрном дают серую муть, а не свечение. */
	--field-page: radial-gradient(
			72% 100% at 50% -8%,
			rgb(91 141 239 / 46%) 0%,
			transparent 66%
		),
		linear-gradient(
			to right,
			rgb(110 215 227 / 2.9%) 0 37.5%,
			rgb(116 212 230 / 3.5%) 50%,
			rgb(126 207 240 / 5.7%) 62.5%,
			rgb(131 205 244 / 8%) 75%,
			rgb(134 203 245 / 9.7%) 87.5%,
			rgb(133 204 245 / 9%)
		);

	/* Поля света тоже уходят в холод: тёплый лайм рядом с синим мутнеет. */
	--field-light: radial-gradient(
			125% 95% at 16% 100%,
			rgb(143 199 255 / 26%) 0%,
			transparent 76%
		),
		linear-gradient(
			to right,
			rgb(96 161 236 / 9.4%),
			rgb(97 166 235 / 10.5%) 25%,
			rgb(98 168 234 / 10.9%) 50%,
			rgb(97 166 235 / 10.5%) 75%,
			rgb(96 161 236 / 9.4%)
		);
	--field-bloom: radial-gradient(
		60% 60% at 50% 45%,
		rgb(175 220 255 / 78%) 0%,
		rgb(111 217 232 / 55%) 35%,
		rgb(91 141 239 / 40%) 62%,
		rgb(42 75 216 / 24%) 86%,
		transparent 100%
	);

	/* Нейтральные в тёмной теме — почти чёрный графит с лёгким холодом:
	   темнее и заметно менее синие, чем раньше, но не серые. Свечения
	   и градиенты остаются синими — на таком фоне они читаются ярче,
	   и в этом весь контраст. */
	--black: #030406;
	--ink-950: #040608;
	--ink-900: #07090d;
	--ink-850: #0b0e13;
	--ink-800: #101419;
	--ink-700: #181d24;
	--ink-600: #242b34;
	--ink-500: #37404b;
	--ink-400: #58616c;
	--ink-300: #858d97;
	--ink-200: #b4bac1;
	--ink-100: #d9dde1;
	--ink-50: #f0f2f4;
	--color-text: #f3f5f7;
	--color-text-secondary: #a9b1ba;
	--color-text-muted: #7e8791;
	--color-surface-deep: #040608;
	--plate-base: #07090d;
	--island-bg: rgb(11 14 19 / 0.94);

	/* --- Тёмная тема: бренд разворачивается в синее --- */
	--color-accent: #5fb2ff;
	--color-accent-hover: #7cc1ff;
	--color-accent-press: #3f9df0;
	--color-accent-soft: rgb(95 178 255 / 14%);
	--color-accent-text: #8cc8ff;
	--color-accent-ink: #8cc8ff;

	--logo-mark-light: #7cc4ff;
	--logo-mark-dark: #2f7fd8;
	--logo-tile: #141b24;
	--logo-tile-edge: rgb(255 255 255 / 12%);
	--lum-petal-1: var(--aurora-sky);
	--lum-petal-2: #6fa8f5;
	--lum-petal-3: var(--aurora-cyan);
	--lum-petal-4: #cfe6ff;
	--plate-glow: rgb(47 134 224 / 26%);
	--plate-accent: #7cc4ff;

	--tint-corner:
		radial-gradient(
			125% 105% at 0% 0%,
			color-mix(in srgb, var(--aurora-blue) 24%, var(--color-surface)) 0%,
			var(--color-surface) 58%
		);
	--tint-bottom:
		radial-gradient(
			135% 115% at 50% 122%,
			color-mix(in srgb, var(--aurora-sky) 22%, var(--color-surface)) 0%,
			var(--color-surface) 64%
		);

	/* В тёмной теме перелив уходит в синее — так глубже и не мутнеет. */
	--tint-iris:
		radial-gradient(
			120% 130% at 4% 114%,
			color-mix(in srgb, var(--aurora-cyan) 20%, var(--color-surface)) 0%,
			transparent 54%
		),
		radial-gradient(
			125% 130% at 104% 14%,
			color-mix(in srgb, var(--aurora-blue) 42%, var(--color-surface)) 0%,
			transparent 62%
		),
		linear-gradient(var(--color-surface), var(--color-surface));
	--tint-right:
		radial-gradient(
			115% 135% at 110% 35%,
			color-mix(in srgb, var(--aurora-sky) 24%, var(--color-surface)) 0%,
			var(--color-surface) 62%
		);

}

/* Те же переливы, когда тёмная тема пришла из системы, а не выбрана руками. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {

	/* В тёмной теме свет складывается с фоном (screen у самого элемента),
	   поэтому цвета берём насыщенные, а не приглушённые: приглушённые
	   на чёрном дают серую муть, а не свечение. */
	--field-page: radial-gradient(
			72% 100% at 50% -8%,
			rgb(91 141 239 / 46%) 0%,
			transparent 66%
		),
		linear-gradient(
			to right,
			rgb(110 215 227 / 2.9%) 0 37.5%,
			rgb(116 212 230 / 3.5%) 50%,
			rgb(126 207 240 / 5.7%) 62.5%,
			rgb(131 205 244 / 8%) 75%,
			rgb(134 203 245 / 9.7%) 87.5%,
			rgb(133 204 245 / 9%)
		);

	/* Поля света тоже уходят в холод: тёплый лайм рядом с синим мутнеет. */
	--field-light: radial-gradient(
			125% 95% at 16% 100%,
			rgb(143 199 255 / 26%) 0%,
			transparent 76%
		),
		linear-gradient(
			to right,
			rgb(96 161 236 / 9.4%),
			rgb(97 166 235 / 10.5%) 25%,
			rgb(98 168 234 / 10.9%) 50%,
			rgb(97 166 235 / 10.5%) 75%,
			rgb(96 161 236 / 9.4%)
		);
	--field-bloom: radial-gradient(
		60% 60% at 50% 45%,
		rgb(175 220 255 / 78%) 0%,
		rgb(111 217 232 / 55%) 35%,
		rgb(91 141 239 / 40%) 62%,
		rgb(42 75 216 / 24%) 86%,
		transparent 100%
	);

	/* Нейтральные в тёмной теме — почти чёрный графит с лёгким холодом:
	   темнее и заметно менее синие, чем раньше, но не серые. Свечения
	   и градиенты остаются синими — на таком фоне они читаются ярче,
	   и в этом весь контраст. */
	--black: #030406;
	--ink-950: #040608;
	--ink-900: #07090d;
	--ink-850: #0b0e13;
	--ink-800: #101419;
	--ink-700: #181d24;
	--ink-600: #242b34;
	--ink-500: #37404b;
	--ink-400: #58616c;
	--ink-300: #858d97;
	--ink-200: #b4bac1;
	--ink-100: #d9dde1;
	--ink-50: #f0f2f4;
	--color-text: #f3f5f7;
	--color-text-secondary: #a9b1ba;
	--color-text-muted: #7e8791;
	--color-surface-deep: #040608;
	--plate-base: #07090d;
	--island-bg: rgb(11 14 19 / 0.94);

	/* --- Тёмная тема: бренд разворачивается в синее --- */
	--color-accent: #5fb2ff;
	--color-accent-hover: #7cc1ff;
	--color-accent-press: #3f9df0;
	--color-accent-soft: rgb(95 178 255 / 14%);
	--color-accent-text: #8cc8ff;
	--color-accent-ink: #8cc8ff;

	--logo-mark-light: #7cc4ff;
	--logo-mark-dark: #2f7fd8;
	--logo-tile: #141b24;
	--logo-tile-edge: rgb(255 255 255 / 12%);
	--lum-petal-1: var(--aurora-sky);
	--lum-petal-2: #6fa8f5;
	--lum-petal-3: var(--aurora-cyan);
	--lum-petal-4: #cfe6ff;
	--plate-glow: rgb(47 134 224 / 26%);
	--plate-accent: #7cc4ff;

	--tint-corner:
		radial-gradient(
			125% 105% at 0% 0%,
			color-mix(in srgb, var(--aurora-blue) 24%, var(--color-surface)) 0%,
			var(--color-surface) 58%
		);
	--tint-bottom:
		radial-gradient(
			135% 115% at 50% 122%,
			color-mix(in srgb, var(--aurora-sky) 22%, var(--color-surface)) 0%,
			var(--color-surface) 64%
		);

	/* В тёмной теме перелив уходит в синее — так глубже и не мутнеет. */
	--tint-iris:
		radial-gradient(
			120% 130% at 4% 114%,
			color-mix(in srgb, var(--aurora-cyan) 20%, var(--color-surface)) 0%,
			transparent 54%
		),
		radial-gradient(
			125% 130% at 104% 14%,
			color-mix(in srgb, var(--aurora-blue) 42%, var(--color-surface)) 0%,
			transparent 62%
		),
		linear-gradient(var(--color-surface), var(--color-surface));
	--tint-right:
		radial-gradient(
			115% 135% at 110% 35%,
			color-mix(in srgb, var(--aurora-sky) 24%, var(--color-surface)) 0%,
			var(--color-surface) 62%
		);
	}
}