/* tokens.css — единая система дизайн-токенов «Ночи карьеры».
   Источник значений — Figma bXB4hf3pnyPVTEkaNtpmWV (снято get_variable_defs
   + get_design_context по экранам hero/welcome/challenge/играм/попапам).
   Единственный источник цветов/размеров/типографики. Magic numbers в компонентах запрещены.
   Шрифты подключаются в fonts.css (раньше этого файла).

   Три слоя (сверху вниз, каждый ссылается на предыдущий):
     1. ПРИМИТИВЫ  — сырые значения (палитра, шкала кегля, интервалы, радиусы, движение).
     2. СЕМАНТИКА  — роли по смыслу (текст/фон/типо-роли/оверлеи/свечения), ссылаются на примитивы.
     3. КОМПОНЕНТЫ — токены конкретных элементов (шапка, кнопка), ссылаются на семантику. */

:root {
	/* ═══════════════════════════════════════════════════════
	   1. ПРИМИТИВЫ — сырые значения, вне контекста применения
	═══════════════════════════════════════════════════════ */

	/* ── Палитра (сырые цвета) ── */
	--c-cream: #FFF6EA; /* тёплый белый */
	--c-gold: #FFD08E; /* золото */
	--c-gold-glow: #FFC778; /* золотое свечение */
	--c-red: #BD0C1E; /* бренд-красный */
	--c-red-dark: #900513; /* тёмно-красный (hover) */
	--c-ink: #121217; /* почти чёрный (Text/black) */
	--c-white: #FFFFFF; /* Text/white, BG/white */
	--c-neutral: #E4E4E4; /* нейтральная плашка (аватар) */
	--c-white-a40: #FFFFFF66; /* белый 40% (Icon/white-disabled) */
	--c-blue-glass: rgba(0, 112, 175, 0.20); /* заливка стеклянных карточек игр */

	/* ── Шкала кегля (px из макета: 50/40/24/20/16/14) ── */
	--fs-50: 50px; /* hero H1 */
	--fs-40: 40px; /* заголовок секции H2 */
	--fs-24: 24px; /* кнопка / фраза-призыв */
	--fs-20: 20px; /* лид, интро, подпись карточки */
	--fs-16: 16px; /* основной текст, навигация */
	--fs-14: 14px; /* лого, надзаголовок, промо */

	/* ── Шкала интервалов (4-based) ── */
	--sp-4: 4px;
	--sp-8: 8px;
	--sp-16: 16px;
	--sp-24: 24px;
	--sp-48: 48px;
	--sp-56: 56px;

	/* ── Радиусы (Figma vars: small 8, base 16, card 33, full 800) ── */
	--rad-8: 8px;
	--rad-16: 16px;
	--rad-33: 33px;
	--rad-800: 800px;

	/* ── Движение ── */
	--dur-scene: 450ms; /* смена сцены */
	--ease-cinematic: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* киношный наезд */

	/* ═══════════════════════════════════════════════════════
	   2. СЕМАНТИКА — роли по смыслу (ссылаются на примитивы)
	═══════════════════════════════════════════════════════ */

	/* ── Цвета по назначению ── */
	--color-cream: var(--c-cream); /* заголовки, текст на кнопке */
	--color-gold: var(--c-gold); /* подзаголовки, лого, акценты */
	--color-gold-glow: var(--c-gold-glow); /* свечение/тени */
	--color-red: var(--c-red); /* бренд, фон кнопки */
	--color-red-dark: var(--c-red-dark); /* hover/active кнопки */
	--color-ink: var(--c-ink); /* тёмный текст, тёмный фон сцен */
	--color-white: var(--c-white); /* текст/фон белый */
	--color-avatar: var(--c-neutral); /* заглушка аватара в шапке */
	--color-icon-disabled: var(--c-white-a40); /* неактивная иконка */
	--color-card-fill: var(--c-blue-glass); /* стеклянная карточка игр */
	--color-card-border: var(--color-gold); /* золотая обводка карточек */

	/* ── Шрифты (FactorA self-host; веса: Regular 400, Medium 500, Extrabold 800, Black 900) ── */
	--font-display: 'Factor A', Georgia, serif; /* заголовки */
	--font-text: 'Factor A', system-ui, sans-serif; /* текст */

	/* ── Типографика (роль → кегль/интерлиньяж) ── */
	--fs-h1: var(--fs-50);
	--lh-h1: 0.93; /* «Ночь карьеры» (Extrabold) */
	--fs-h2: var(--fs-40);
	--lh-h2: 0.93; /* заголовок секции (Extrabold) */
	--fs-lead: var(--fs-20);
	--lh-lead: 24px; /* лид/интро/подпись (Medium) */
	--fs-hint: var(--fs-24);
	--lh-hint: 24px; /* фраза-призыв (Medium, белое свечение) */
	--fs-body: var(--fs-16);
	--lh-body: 16px; /* основной текст (Regular) */

	/* ── Интервалы по ролям (имена xs/m сохранены — на них завязаны компоненты) ── */
	--space-3xs: var(--sp-4); /* зазор иконка↔текст */
	--space-xs: var(--sp-8); /* мелкий зазор */
	--space-s: var(--sp-16); /* базовый зазор */
	--space-m: var(--sp-24); /* средний отступ, паддинг шапки */
	--space-l: var(--sp-48); /* ритм блоков в стопке */
	--space-section-x: var(--sp-56); /* боковой отступ секций */

	/* ── Радиусы по ролям ── */
	--radius-small: var(--rad-8); /* мелкие плашки (промо) */
	--radius-base: var(--rad-16); /* инпуты, карточки-свитки */
	--radius-card: var(--rad-33); /* стеклянные карточки игр */
	--radius-full: var(--rad-800); /* круг (аватар, пилюли) */

	/* ── Свечения / тени текста ── */
	--glow-gold: 0 0 4px var(--color-gold-glow); /* золотое свечение заголовков */
	--glow-white: 0 0 4px rgba(255, 255, 255, 0.76); /* свечение фразы-призыва */

	/* ── Оверлеи поверх фоновых фото (повторяются по сценам) ── */
	--overlay-hero: linear-gradient(-61deg, rgba(0, 0, 0, 0.63) 44.6%, rgba(0, 0, 0, 0) 65.4%); /* hero: темнит левый край */
	--overlay-left: linear-gradient(to right, rgba(0, 0, 0, 0.58) 19%, rgba(0, 0, 0, 0) 41%); /* сцены с текстом слева */
	--overlay-vignette: radial-gradient(ellipse at 50% 53%, rgba(0, 0, 0, 0) 4%, rgba(0, 0, 0, 0.58) 100%); /* виньетка на фонах игр */

	/* ── Эффекты ── */
	--card-blur: 5.5px; /* backdrop-blur стеклянных карточек игр */

	/* ── Бренд-цвета поп-апов партнёров (экран 2, советы) ── */
	--brand-psb: #605EE5; /* фиолетовый */
	--brand-otp: #B3ED0D; /* лайм */
	--brand-alfa: #EF3123; /* красный */
	--brand-mts: #010101; /* чёрный */
	--brand-gov: #FFFFFF; /* белый (Твой город) */

	/* ── Сценовый роутер ── */
	--scene-fade: var(--dur-scene); /* длительность перехода между сценами */
	--scene-zoom: 1.03; /* масштаб входа/выхода сцены */

	/* ═══════════════════════════════════════════════════════
	   3. КОМПОНЕНТЫ — токены конкретных элементов
	═══════════════════════════════════════════════════════ */

	/* ── Шапка (Figma header, 81px) ── */
	--header-h: 0px; /* шапка убрана — верхний паддинг сцен добавляется отдельно (--space-*) */
	--fs-nav: var(--fs-16); /* пункты меню (Regular) */
	--fs-logo: var(--fs-14); /* CHANGELLENGE / промо / надзаголовок */
	--avatar-size: 40px; /* аватар */

	/* ── Кнопка (спека Figma «кнопка» 39:5365, дословно) ──
	   FactorA Bold 24/32; фон #BD0C1E, hover #900513; текст/обводка #FFF6EA 2px;
	   паддинги 24/44; высота 80; ширина 300 (свитки 180, результаты 408). */
	--btn-bg: var(--color-red);
	--btn-bg-hover: var(--color-red-dark);
	--btn-text: var(--color-cream);
	--btn-border: var(--color-cream);
	--btn-border-width: 2px;
	--btn-font-size: var(--fs-24);
	--btn-line-height: 32px;
	--btn-font-weight: 700; /* приоритет у спеки кнопки (Bold), не у Medium из текст-узла */
	--btn-pad-y: var(--space-m); /* 24px */
	--btn-pad-x: 44px; /* одноразовое значение спеки — не в общей шкале */
	--btn-height: 80px;
	--btn-width: 300px;
	/* compact — экран 11 «свитки» */
	--btn-height-compact: 50px;
	--btn-width-compact: 180px;
	/* wide — экраны результатов игр (6/10/13) */
	--btn-width-wide: 408px;

	/* ═══════════════════════════════════════════════════════
	   4. НОЧНОЕ ОКРУЖЕНИЕ (#world) + ПАНЕЛИ КОНТЕНТА
		  Слои: примитивы → семантика → компоненты.
		  Единый лес за всеми сценами, читаемые панели контента.
	═══════════════════════════════════════════════════════ */

	/* ── 4.1 Примитивы окружения (сырые значения) ── */
	--c-night-top: #070b16; /* зенит неба (глубокая ночь) */
	--c-night-mid: #0b1220; /* середина неба */
	--c-night-low: #0d1712; /* у горизонта, чуть зеленее */
	--c-forest-far: #0a140f; /* дальний лес (светлее) */
	--c-forest-mid: #050d09; /* средний лес (темнее) */
	--c-forest-side: #061009; /* боковая листва */
	--c-ground: #04080a; /* земля/низ */
	--c-moon: #fff4d6; /* диск/свет луны */
	--c-star: #fdf6e3; /* звёзды */
	--c-fog-soft: rgba(190, 214, 188, 0.14); /* мягкий туман */

	/* ── 4.2 Семантика окружения ── */
	--world-sky: linear-gradient(180deg,
	var(--c-night-top) 0%,
	var(--c-night-mid) 42%,
	var(--c-night-low) 78%,
	var(--c-ground) 100%);
	--world-moon-glow: radial-gradient(circle at center,
	rgba(255, 244, 214, 0.55) 0%,
	rgba(255, 236, 190, 0.22) 30%,
	rgba(255, 220, 160, 0.05) 55%,
	transparent 72%);
	--world-vignette: radial-gradient(ellipse at 50% 45%,
	transparent 55%,
	rgba(0, 0, 0, 0.22) 85%,
	rgba(0, 0, 0, 0.4) 100%);
	--world-ground: linear-gradient(to top,
	var(--c-ground) 0%,
	rgba(6, 12, 9, 0.85) 40%,
	transparent 100%);
	--firefly-color: var(--color-gold-glow);

	/* Прозрачности силуэтов леса */
	--forest-far-opacity: 0.45;
	--forest-mid-opacity: 0.85;
	--foliage-opacity: 0.7;

	/* ── 4.3 Компонент: панель контента (.scene-panel) ── */
	--c-surface: rgba(14, 16, 22, 0.72); /* примитив: фон панели */
	--color-surface: var(--c-surface); /* семантика */
	--panel-border: rgba(255, 208, 142, 0.28);
	--panel-radius: var(--rad-33);
	--panel-pad-y: var(--sp-48);
	--panel-pad-x: var(--sp-48);
	--panel-blur: 10px;
	--panel-glow: 0 0 40px rgba(255, 199, 120, 0.10),
	0 24px 60px rgba(0, 0, 0, 0.45);

	/* ═══════════════════════════════════════════════════════
	   5. РЕФАКТОР: ИКОНКИ + СВИТКИ + РЕКА
		  Слои: примитивы → семантика.
	═══════════════════════════════════════════════════════ */

	/* ── 5.1 Иконки (self-host SVG-спрайт, класс .ui-icon) ── */
	--icon-color: var(--color-gold);
	--icon-sm: 20px;
	--icon-md: 28px;
	--icon-lg: 40px;
	--icon-xl: 56px;

	/* ── 5.2 Свитки/пергамент (статьи) ── */
	/* примитивы */
	--c-parch-light: #f4e4c1;
	--c-parch-mid: #e7cf9d;
	--c-parch-dark: #d6b578;
	--c-parch-edge: #b8965a;
	--c-parch-ink: #3a2c15;
	/* семантика */
	--scroll-bg: linear-gradient(158deg,
	var(--c-parch-light) 0%,
	var(--c-parch-mid) 55%,
	var(--c-parch-dark) 100%);
	--scroll-roller: linear-gradient(90deg,
	var(--c-parch-edge) 0%,
	var(--c-parch-dark) 50%,
	var(--c-parch-edge) 100%);
	--scroll-border: rgba(184, 150, 90, 0.9);
	--scroll-text: var(--c-parch-ink);

	/* ── 5.3 Река (шаг «путь») ── */
	/* примитивы */
	--c-river-deep: #0d2739; /* глубина по центру русла */
	--c-river-mid: #1a4d68; /* основная вода */
	--c-river-shallow: #367a97; /* мелководье у берегов (светлее) */
	--c-river-bank: #081824; /* тёмная кромка-берег */
	--c-river-sky: #4a7d9c; /* холодный отблеск неба сверху */
	--c-river-glow: #cfeef6; /* блик воды / отражение луны */
	/* семантика */
	--river-deep: var(--c-river-deep);
	--river-mid: var(--c-river-mid);
	--river-shallow: var(--c-river-shallow);
	--river-bank: var(--c-river-bank);
	--river-sky: var(--c-river-sky);
	--river-glow: var(--c-river-glow);
	--river-ripple: var(--c-river-glow);
}