/*
	Токены «Цифрового Контура». Сырые значения живут только здесь.

	Семья с Ореолом: тот же Golos Text, те же волосяные линии, пилюли
	и ритм. Отличия родителя: тёмная тема — основная, зелёный не мягкий
	«здоровый», а цифровой, сигнальный; вместо глянцевых иллюстраций —
	стекло и контурные чертежи; подписи и данные — моноширинным.

	Тема: по умолчанию тёмная. Светлая включается переключателем в шапке
	(data-theme="light" на <html>), выбор запоминается.
*/

:root {
	color-scheme: dark;
	interpolate-size: allow-keywords;

	/* --- Сигнальный зелёный --- */
	--signal-100: #c9ffdf;
	--signal-200: #8effbe;
	--signal-300: #52ff9c;
	--signal-400: #1df57f;
	--signal-500: #00d96a;
	--signal-600: #00b358;
	--signal-700: #008a45;
	--signal-800: #005f30;
	--signal-900: #022a16;

	/* --- Графит с еле заметной зеленью --- */
	--graphite-1000: #030504;
	--graphite-950: #060908;
	--graphite-900: #0a0e0c;
	--graphite-850: #0e1311;
	--graphite-800: #131916;
	--graphite-700: #1c2420;
	--graphite-600: #29322e;
	--graphite-500: #46504b;
	--graphite-400: #6c7772;
	--graphite-300: #98a39e;
	--graphite-200: #c4ccc8;
	--graphite-100: #e2e8e5;
	--graphite-50: #f1f4f2;

	/* --- Поверхности --- */
	--color-background: light-dark(#eef2f0, #050706);
	--color-surface: light-dark(#ffffff, #0b0f0d);
	--color-surface-2: light-dark(#f5f7f6, #111613);
	--color-surface-inset: light-dark(#e6ebe8, #161c19);

	--color-border: light-dark(rgb(7 20 13 / 9%), rgb(255 255 255 / 8%));
	--color-border-strong: light-dark(rgb(7 20 13 / 17%), rgb(255 255 255 / 16%));
	--color-grid: light-dark(rgb(7 20 13 / 5%), rgb(255 255 255 / 3.5%));

	/* --- Текст --- */
	--color-text: light-dark(#07110c, #eef5f1);
	--color-text-secondary: light-dark(#3f4d46, #a7b5ae);
	/* Подобрано под 4.5:1 на всех поверхностях — мелкий текст. */
	--color-text-muted: light-dark(#56645d, #7f8d86);
	--color-text-inverse: light-dark(#ffffff, #050706);

	/* --- Действие ---
	   Кнопка зелёная в обеих темах, текст на ней тёмный: белый на этом
	   зелёном не проходит по контрасту. */
	--color-accent: light-dark(var(--signal-500), var(--signal-400));
	--color-accent-hover: light-dark(var(--signal-600), var(--signal-300));
	--color-accent-press: light-dark(var(--signal-700), var(--signal-500));
	--color-accent-contrast: #02140a;
	--color-accent-soft: light-dark(rgb(0 179 88 / 10%), rgb(29 245 127 / 11%));
	/* Зелёный для мелкого текста: в светлой теме темнее, иначе не читается. */
	--color-accent-ink: light-dark(#00723a, var(--signal-400));
	--color-glow: light-dark(rgb(0 179 88 / 26%), rgb(29 245 127 / 34%));

	/* --- Стекло ---
	   Пластина: молочная заливка, сверху ярче, тонкая светлая кромка
	   и блик по верхнему краю — так стекло читается и без размытия фона
	   (backdrop-filter в объёмной сцене браузеры не рисуют). */
	--glass-hi: light-dark(rgb(255 255 255 / 92%), rgb(255 255 255 / 20%));
	--glass-top: light-dark(rgb(255 255 255 / 70%), rgb(255 255 255 / 13%));
	--glass-mid: light-dark(rgb(255 255 255 / 36%), rgb(255 255 255 / 4.5%));
	--glass-low: light-dark(rgb(255 255 255 / 55%), rgb(255 255 255 / 9%));
	--glass-edge: light-dark(rgb(255 255 255 / 95%), rgb(255 255 255 / 16%));
	--glass-rim: light-dark(#ffffff, rgb(255 255 255 / 42%));
	--glass-shade: light-dark(rgb(8 40 22 / 32%), rgb(0 0 0 / 90%));
	--glass-reflect: light-dark(rgb(255 255 255 / 40%), rgb(0 0 0 / 22%));

	/* Зелёное стекло — выбранная пластина. */
	--glass-green-hi: light-dark(rgb(232 255 241 / 75%), rgb(210 255 230 / 55%));
	--glass-green-top: light-dark(rgb(0 214 104 / 88%), rgb(29 245 127 / 62%));
	--glass-green-mid: light-dark(rgb(0 170 85 / 78%), rgb(0 150 75 / 42%));
	--glass-green-low: light-dark(rgb(0 204 102 / 82%), rgb(29 245 127 / 50%));
	--glass-green-edge: light-dark(rgb(255 255 255 / 90%), rgb(170 255 210 / 90%));
	--glass-green-rim: light-dark(#ffffff, rgb(230 255 240 / 95%));

	/* --- Гарнитуры --- */
	--font-display: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-sans: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

	/* --- Размеры: текучие --- */
	--text-hero: clamp(2.5rem, 5.6vw, 5.25rem);
	--text-display-xl: clamp(2.125rem, 4vw, 3.75rem);
	--text-display-l: clamp(1.75rem, 3vw, 2.75rem);
	--text-display-m: clamp(1.3125rem, 1.8vw, 1.625rem);
	--text-lg: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
	--text-base: 1rem;
	--text-sm: 0.875rem;
	--text-xs: 0.75rem;
	--text-mono: 0.75rem;

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

	--lh-tight: 0.98;
	--lh-snug: 1.08;
	--lh-normal: 1.5;

	/* Трекинг всегда плотный — разрядка читается как шаблон. */
	--ls-display: -0.045em;
	--ls-heading: -0.035em;
	--ls-body: -0.01em;
	--ls-mono: 0;

	/* --- Ритм --- */
	--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;

	--container: 1440px;
	--container-text: 64ch;
	--gutter: clamp(18px, 3vw, 40px);
	--section-gap: clamp(72px, 9vw, 152px);
	--header-h: 72px;

	/* --- Форма: строже Ореола. Контролы — пилюли, как у всей семьи. --- */
	--radius-xs: 6px;
	--radius-sm: 10px;
	--radius-md: 14px;
	--radius-lg: 20px;
	--radius-xl: 26px;
	--radius-pill: 999px;

	--ring-focus: 0 0 0 3px light-dark(rgb(0 179 88 / 35%), rgb(29 245 127 / 35%));

	/* --- Движение --- */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
	--ease-glide: cubic-bezier(0.2, 0.75, 0.15, 1);
	--dur-fast: 160ms;
	--dur-base: 260ms;
	--dur-slow: 600ms;

	/* --- Фактура: зерно поверх плоскостей, обесцвеченное --- */
	--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");
}

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