/**
 * Formula Market — типографическая система
 * Эталон: shampoo-guide.css
 */
:root {
	--font-family: "Cera Pro", system-ui, -apple-system, sans-serif;

	--text-2xs: 10px;
	--text-xs: 13px;
	--text-display: 48px;
	--text-sm: 15px;
	--text-base: 15px;
	--text-md: 18px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 28px;
	--text-3xl: 36px;

	--font-regular: 400;
	--font-medium: 500;
	--font-semibold: 600;
	--font-bold: 700;

	--leading-tight: 1.25;
	--leading-ui: 1.4;
	--leading-body: 1.7;

	--text-primary: #0D0D0D;
	--text-secondary: #5a5a5a;
	--text-muted: #788192;
	--text-accent: #e6b21e;
}

/* Базовый UI-текст (каталог, шапка, формы) */
body {
	font-family: var(--font-family);
	font-size: var(--text-sm);
	font-weight: var(--font-regular);
	line-height: var(--leading-ui);
	color: var(--text-primary);
}

/* Длинные тексты и SEO */
.descr,
.descr p,
.descr li,
.text-prose {
	font-size: var(--text-base);
	line-height: var(--leading-body);
}

.descr h2,
.text-prose h2 {
	font-size: var(--text-2xl);
	font-weight: var(--font-medium);
	line-height: 1.3;
	margin-top: 32px;
	margin-bottom: 24px;
}

h1, .h1 {
	font-size: var(--text-3xl);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
}

h2, .h2,
.section-title {
	font-size: var(--text-2xl);
	font-weight: var(--font-medium);
	line-height: 1.3;
}

h3, .h3 {
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	line-height: 1.35;
}

.section-main-title {
	font-size: var(--text-3xl);
	font-weight: var(--font-medium);
	line-height: var(--leading-tight);
}

.text-caption {
	font-size: var(--text-xs);
	line-height: var(--leading-ui);
}

.text-ui {
	font-size: var(--text-sm);
	line-height: var(--leading-ui);
}

.text-lead {
	font-size: var(--text-md);
	line-height: 1.65;
}

/* Кнопки */
.btn,
.btn-black,
.btn-default,
.btn-black__transparent,
.btn.btn-white__transparent,
.btn.btn-blue,
.btn.btn-gray {
	font-size: var(--text-sm);
	line-height: var(--leading-ui);
}

/* Навигация подразделов */
.shampoo-guide__nav a,
.category-subnav a {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
}

.promo-bar {
	font-size: var(--text-xs);
}

/* Сброс bootstrap внутри оформления заказа */
.fm-scope,
.fm-scope .form-control,
.fm-scope .btn {
	font-family: var(--font-family);
}

@media screen and (max-width: 767px) {
	:root {
		--text-3xl: 28px;
		--text-2xl: 24px;
		--text-xl: 20px;
	}
}