/*
 * ModVault — слой 1: дизайн-токены.
 * Единственное место, где заданы цвета, отступы, радиусы и типографика.
 * Значения синхронизированы с design/design-system.md §2.
 */

:root {
	color-scheme: dark;

	/* --- Цвет: базовые поверхности --- */
	--mv-bg: #0b0e14;
	--mv-bg-2: #0f131c;
	--mv-surface: #151a26;
	--mv-surface-2: #1c2231;
	--mv-surface-3: #242c3d;
	--mv-border: #242b3b;
	--mv-border-strong: #333c52;

	/* --- Цвет: текст --- */
	--mv-text: #e9ecf5;
	--mv-text-2: #b4bcd0;
	--mv-muted: #7e879c;

	/* --- Цвет: бренд и статусы --- */
	--mv-primary: #7b5cff;
	--mv-primary-hover: #8e74ff;
	--mv-primary-press: #6748eb;
	--mv-primary-soft: rgba(123, 92, 255, 0.14);
	--mv-accent: #00e5a0;
	--mv-accent-soft: rgba(0, 229, 160, 0.14);
	--mv-warn: #ffb13d;
	--mv-warn-soft: rgba(255, 177, 61, 0.14);
	--mv-danger: #ff5c5c;
	--mv-danger-soft: rgba(255, 92, 92, 0.14);
	--mv-info: #3da5ff;
	--mv-info-soft: rgba(61, 165, 255, 0.14);
	--mv-on-primary: #ffffff;
	--mv-on-accent: #04150f;

	/* Цвет игры: переопределяется инлайном через --mv-game-color. */
	--mv-game-color: var(--mv-primary);

	/* --- Градиенты --- */
	--mv-grad-brand: linear-gradient(135deg, #7b5cff 0%, #b84dff 55%, #ff4d9d 100%);
	--mv-grad-accent: linear-gradient(135deg, #00e5a0 0%, #3da5ff 100%);
	--mv-grad-placeholder: linear-gradient(135deg, #1c2231 0%, #31264f 60%, #12303a 100%);
	--mv-grad-fade: linear-gradient(180deg, rgba(11, 14, 20, 0) 0%, rgba(11, 14, 20, 0.92) 100%);
	--mv-grad-hero:
		radial-gradient(1200px 600px at 12% -20%, rgba(123, 92, 255, 0.35), transparent 62%),
		radial-gradient(900px 520px at 92% -10%, rgba(0, 229, 160, 0.16), transparent 58%);

	/* --- Типографика --- */
	--mv-font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
	--mv-font-display: "Rajdhani", "Inter", "Segoe UI Semibold", system-ui, sans-serif;
	--mv-font-mono: ui-monospace, "JetBrains Mono", "Cascadia Mono", Consolas, monospace;

	--mv-fs-display: clamp(2.125rem, 1.35rem + 3.4vw, 3.5rem);
	--mv-fs-h1: clamp(1.75rem, 1.28rem + 2.1vw, 2.5rem);
	--mv-fs-h2: clamp(1.5rem, 1.24rem + 1.15vw, 1.875rem);
	--mv-fs-h3: clamp(1.1875rem, 1.12rem + 0.35vw, 1.375rem);
	--mv-fs-h4: 1.125rem;
	--mv-fs-lg: 1.0625rem;
	--mv-fs-base: 0.9375rem;
	--mv-fs-sm: 0.8125rem;
	--mv-fs-xs: 0.75rem;
	--mv-fs-overline: 0.6875rem;

	--mv-lh-tight: 1.15;
	--mv-lh-heading: 1.22;
	--mv-lh-base: 1.6;
	--mv-lh-loose: 1.75;

	/* --- Раскладка --- */
	--mv-container: 1280px;
	--mv-container-pad: 24px;
	--mv-gutter: 24px;
	--mv-sidebar: 280px;
	--mv-single-side: 392px;
	--mv-header-h: 76px;
	--mv-topbar-h: 36px;

	/*
	 * Полная высота шапки вместе с верхней полосой — от неё считаются
	 * отступы липких колонок. JS уточняет значение по факту после загрузки,
	 * чтобы колонки не заезжали под шапку.
	 */
	--mv-header-height: 113px;

	/* --- Отступы --- */
	--mv-space-1: 4px;
	--mv-space-2: 8px;
	--mv-space-3: 12px;
	--mv-space-4: 16px;
	--mv-space-5: 20px;
	--mv-space-6: 24px;
	--mv-space-7: 32px;
	--mv-space-8: 40px;
	--mv-space-9: 48px;
	--mv-space-10: 64px;
	--mv-space-11: 80px;
	--mv-space-12: 120px;
	--mv-section-y: clamp(3rem, 1.6rem + 5vw, 6rem);

	/* --- Радиусы --- */
	--mv-radius-xs: 6px;
	--mv-radius-sm: 10px;
	--mv-radius-md: 14px;
	--mv-radius-lg: 20px;
	--mv-radius-xl: 28px;
	--mv-radius-pill: 999px;

	/* --- Тени и обводки --- */
	--mv-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4);
	--mv-shadow-2: 0 8px 24px rgba(0, 0, 0, 0.45);
	--mv-shadow-3: 0 20px 48px rgba(0, 0, 0, 0.55);
	--mv-glow-primary: 0 0 0 1px rgba(123, 92, 255, 0.5), 0 8px 30px rgba(123, 92, 255, 0.28);
	--mv-ring: 0 0 0 3px rgba(123, 92, 255, 0.45);

	/* --- Анимация --- */
	--mv-t-fast: 140ms cubic-bezier(0.4, 0, 0.2, 1);
	--mv-t: 220ms cubic-bezier(0.4, 0, 0.2, 1);
	--mv-t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Слои --- */
	--mv-z-header: 100;
	--mv-z-drawer: 200;
	--mv-z-modal: 300;
	--mv-z-toast: 400;

	/* --- Размеры элементов --- */
	--mv-h-sm: 32px;
	--mv-h-md: 40px;
	--mv-h-lg: 48px;
	--mv-h-xl: 56px;
}

@media (max-width: 768px) {
	:root {
		--mv-container-pad: 16px;
		--mv-gutter: 16px;
		--mv-header-h: 60px;
		--mv-header-height: 61px;
	}
}

/*
 * Локальные шрифты. Файлы в репозиторий не входят: положите
 * inter-variable.woff2 и rajdhani-700.woff2 в assets/fonts/ и снимите
 * комментарий — тема сразу начнёт их использовать (стек уже прописан
 * в --mv-font-sans / --mv-font-display).
 */
/*
@font-face {
	font-family: "Inter";
	src: url("../fonts/inter-variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Rajdhani";
	src: url("../fonts/rajdhani-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
*/