/*
 *  Единственный источник значений оформления для всего сайта.
 *
 *  Сайт вырос из двух частей — корпоративных страниц mpp-rus.ru и витрины
 *  статистики ДТП, — и у каждой была своя шкала размеров и своя палитра.
 *  Одинаковые по смыслу заголовки выходили разными, а каждая правка на
 *  стыке превращалась в подгонку одного файла под другой. Здесь описаны
 *  роли: «основной текст», «заголовок раздела», «фон карточки». Ниже по
 *  цепочке (site.css, stats.css, home.css) значения не задаются заново —
 *  только берутся отсюда.
 *
 *  Базовый размер шрифта — 62.5%, поэтому 1rem = 10px и rem читается как
 *  «десятки пикселей»: 1.7rem — это 17px.
 */

:root {
	/* ── Типографика ───────────────────────────────────────────────────
	   Шкала общая для всех разделов: h1 страницы одинаков и в статистике,
	   и в «Сведениях об ИТ-деятельности». Заголовки внутри компонентов
	   (панель, блок «Смотрите также») — отдельные роли, они мельче
	   намеренно и тоже одинаковы везде. */
	--font: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
		'Noto Sans', 'Ubuntu', 'Droid Sans', 'Helvetica Neue', sans-serif;
	--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--fs-h1: 3.2rem;
	--fs-h2: 2.2rem;
	--fs-h3: 1.8rem;
	--fs-lead: 1.8rem;      /* вводный абзац под заголовком */
	--fs-body: 1.7rem;      /* основной текст */
	--fs-ui: 1.5rem;        /* таблицы, поля, служебные подписи */
	--fs-small: 1.35rem;    /* сноски, единицы измерения, пометки */
	--fs-label: 1.3rem;     /* надзаголовки блоков, капслок */
	--fs-nav: 1.6rem;       /* пункты главного меню */
	--fs-field: 1.6rem;     /* поля ввода на узких экранах: ниже — Safari зумит */
	--fs-metric: 2.7rem;    /* крупное число в плитке показателей */
	--fs-tiny: 1.2rem;      /* подписи на графиках, значки */
	--fs-axis: 1.1rem;      /* деления осей */
	--fs-micro: 0.9rem;     /* стрелки сортировки в таблицах */

	--lh-h1: 1.15;
	--lh-h2: 1.25;
	--lh-body: 1.55;
	--lh-ui: 1.4;

	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* ── Фирменная палитра ─────────────────────────────────────────── */
	--mpp-blue: #1446A0;
	--mpp-blue-dark: #0F3578;
	--mpp-accent: #7E9ACB;
	--mpp-line: #E5E5EA;
	--mpp-muted: #8E8E93;

	/* ── Роли цвета ────────────────────────────────────────────────────
	   Их и переопределяет тёмная тема. Фирменный синий фон страницы,
	   шапки и подвала в ней сохраняется — темнеет только содержимое. */
	--shell: #e9eef8;       /* внешняя подложка вокруг листа */
	--card: #ffffff;        /* лист с содержимым, панели, карточки */
	--card-soft: #ffffff;   /* вложенные карточки внутри листа */
	--ink: #1c1c1e;         /* основной текст */
	--ink-soft: #3a3a3c;    /* второстепенный текст */
	--muted: #8E8E93;       /* подписи, единицы, сноски */
	--link: var(--mpp-blue);
	--line: var(--mpp-line);
	--line-soft: #f0f2f5;   /* разделители внутри таблиц */
	--tint: #eef2fb;        /* голубая плашка */
	--tint-2: #f5f7fb;      /* серо-голубой блок */
	--accent: var(--mpp-blue);
	--accent-soft: #eef2fb;
	--crit: #9d2235;
	--crit-soft: #fbecee;
	--warn: #8a5a12;
	--warn-soft: #fdf4e5;
	--series-dtp: #2a78d6;
	--series-ran: #d18f00;
	--series-pog: #d0384a;

	--subnav-bg: #ffffff;
	--subnav-ink: var(--mpp-blue-dark);
	--card-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.25);

	/* ── Геометрия ─────────────────────────────────────────────────── */
	--container: 112rem;    /* общая ширина шапки, содержимого и подвала */
	--radius: 0.8rem;
	--radius-lg: 1.2rem;
	--radius-xl: 2.4rem;
	--header-h: 6.4rem;
}

/* Тёмная тема: меняются только роли цвета, шкала размеров общая. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--shell: #0a0d0f;
		--card: #161a1d;
		--card-soft: #101315;
		--ink: #e7eaee;
		--ink-soft: #b3bcc6;
		--muted: #98a2ad;
		--link: #7E9ACB;
		--line: #252b31;
		--line-soft: #1c2126;
		--tint: #152532;
		--tint-2: #1c2126;
		--accent: #7E9ACB;
		--accent-soft: #152532;
		--crit: #ff8f9c;
		--crit-soft: #2c1a1e;
		--warn: #e0aa5e;
		--warn-soft: #2a2214;
		--series-dtp: #3987e5;
		--series-ran: #c98500;
		--series-pog: #d9455c;
		--subnav-bg: #161a1d;
		--subnav-ink: #b9c7de;
		--card-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.55);
	}
}

:root[data-theme="dark"] {
	--shell: #0a0d0f;
	--card: #161a1d;
	--card-soft: #101315;
	--ink: #e7eaee;
	--ink-soft: #b3bcc6;
	--muted: #98a2ad;
	--link: #7E9ACB;
	--line: #252b31;
	--line-soft: #1c2126;
	--tint: #152532;
	--tint-2: #1c2126;
	--accent: #7E9ACB;
	--accent-soft: #152532;
	--crit: #ff8f9c;
	--crit-soft: #2c1a1e;
	--warn: #e0aa5e;
	--warn-soft: #2a2214;
	--series-dtp: #3987e5;
	--series-ran: #c98500;
	--series-pog: #d9455c;
	--subnav-bg: #161a1d;
	--subnav-ink: #b9c7de;
	--card-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.55);
}

/* Мельче экрана — мельче заголовки; роли и их соотношение сохраняются. */
@media screen and (max-width: 60em) {
	:root {
		--fs-h1: 2.6rem;
		--fs-h2: 1.9rem;
		--fs-h3: 1.7rem;
		--fs-lead: 1.7rem;
		--fs-body: 1.6rem;
	}
}