/* =====================================================================
   X-Pay Blog — дизайн-токены
   Палитра чёрно-белая: цвет задаётся только через переменные ниже.
   Шрифт — Museo Sans Cyrl 300/500/700 (как в теме kassablog).
   Чтобы поменять тон бренда, правьте только этот файл.
   ===================================================================== */

@font-face { font-family: 'Museo Sans Cyrl'; src: url('../fonts/museo-sans-cyrl/museo-sans-cyrl-300.woff2') format('woff2'); font-weight: 100 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Sans Cyrl'; src: url('../fonts/museo-sans-cyrl/museo-sans-cyrl-500.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Museo Sans Cyrl'; src: url('../fonts/museo-sans-cyrl/museo-sans-cyrl-700.woff2') format('woff2'); font-weight: 700 900; font-style: normal; font-display: swap; }
/* Фолбэк с подогнанными метриками — без скачка вёрстки при загрузке шрифта */
@font-face { font-family: 'Museo Sans Cyrl Fallback'; src: local('Arial'); ascent-override: 91.71%; descent-override: 25.37%; line-gap-override: 0%; size-adjust: 102.49%; }

:root {
	/* --- Цвет: шкала серого --- */
	--xp-black: #0a0a0a;
	--xp-gray-900: #171717;
	--xp-gray-800: #262626;
	--xp-gray-700: #404040;
	--xp-gray-600: #525252;
	--xp-gray-500: #737373;
	--xp-gray-400: #a3a3a3;
	--xp-gray-300: #d4d4d4;
	--xp-gray-200: #e5e5e5;
	--xp-gray-100: #f2f2f2;
	--xp-gray-50:  #f7f7f7;
	--xp-white: #ffffff;

	/* --- Цвет: роли (используйте их в компонентах, а не шкалу) --- */
	--xp-bg: var(--xp-white);             /* фон страницы */
	--xp-surface: var(--xp-white);        /* карточки, панели */
	--xp-surface-2: var(--xp-gray-50);    /* вторичные панели, «Коротко» */
	--xp-surface-inverse: var(--xp-black);/* футер, CTA, баннеры */
	--xp-text: var(--xp-black);
	--xp-text-2: var(--xp-gray-500);      /* мета, подписи */
	--xp-text-inverse: var(--xp-white);
	--xp-text-inverse-2: var(--xp-gray-400);
	--xp-line: var(--xp-gray-200);
	--xp-line-strong: var(--xp-gray-300);
	--xp-accent: var(--xp-black);         /* кнопки, активные состояния */
	--xp-accent-text: var(--xp-white);
	--xp-focus: var(--xp-black);

	/* --- Типографика --- */
	--xp-font: 'Museo Sans Cyrl', 'Museo Sans Cyrl Fallback', Arial, sans-serif;
	--xp-fw-light: 300;
	--xp-fw-medium: 500;
	--xp-fw-bold: 700;
	--xp-fs-xs: 12px;
	--xp-fs-sm: 14px;
	--xp-fs-md: 16px;
	--xp-fs-lg: 18px;   /* текст статьи */
	--xp-fs-h4: 20px;
	--xp-fs-h3: 24px;
	--xp-fs-h2: 30px;
	--xp-fs-h1: 44px;
	--xp-lh-tight: 1.15;
	--xp-lh: 1.55;

	/* --- Форма и ритм --- */
	--xp-r-sm: 8px;     /* кнопки, поля, чипы */
	--xp-r-md: 12px;    /* картинки в карточках */
	--xp-r-lg: 20px;    /* крупные панели */
	--xp-r-pill: 999px;
	--xp-space-1: 4px;
	--xp-space-2: 8px;
	--xp-space-3: 12px;
	--xp-space-4: 16px;
	--xp-space-5: 24px;
	--xp-space-6: 32px;
	--xp-space-7: 48px;
	--xp-space-8: 72px;
	--xp-container: 1180px;
	--xp-gutter: 20px;
	--xp-header-h: 72px;
	--xp-subbar-h: 49px;   /* строка разделов блога, вместе с линиями */
	--xp-sticky-top: calc(var(--xp-header-h) + var(--xp-subbar-h));
	--xp-shadow: 0 1px 2px rgba(10,10,10,.04), 0 8px 24px rgba(10,10,10,.06);
	--xp-ease: cubic-bezier(.2,.7,.2,1);
}

@media (max-width: 767px) {
	:root {
		--xp-fs-h1: 30px;
		--xp-fs-h2: 24px;
		--xp-fs-h3: 20px;
		--xp-fs-lg: 17px;
		--xp-gutter: 16px;
		--xp-header-h: 64px;
		--xp-subbar-h: 45px;
	}
}