/*
 * «Пиши грамотно» — токени оформлення.
 *
 * Напрямок «Учнівський зошит»: папір у ледь синюватому тоні, синє чорнило
 * як акцент, коректорський червоний — другим кольором на полях і хвилястих
 * підкреслівках. Прямі кути, тонкі лінії, вузькі поля.
 *
 * Структурні патерни цієї теми (щоб наступний сайт узяв інші):
 *   hero H1 · заголовок секції S1 · бейдж B5 «підкреслівка»
 *   картки C17 «аркуш», C18 «картотека», C19 «нотатка на полях»
 *   стрічка — модифікатор osn-card--linijka
 *
 * Єдине місце, де в темі живуть значення кольору. Нижче вони ж
 * перевизначають токени Osnova, тому батьківський скін лишається
 * підключеним і перебивати його правила не доводиться.
 */

:root {
	/* Гарнітури */
	--pysh-font-display: "Piazzolla", Georgia, "Times New Roman", serif;
	--pysh-font-body: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Папір */
	--pysh-bg: #f6f7fa;
	--pysh-surface: #ffffff;
	--pysh-surface-alt: #eceff7;
	--pysh-line: #dce1ee;
	--pysh-line-strong: #bfc8de;
	--pysh-paper-line: #e6eaf4;   /* лінійка зошита, ледь помітна */
	--pysh-paper-step: 34px;      /* крок лінійки */

	/* Синє чорнило */
	--pysh-accent: #24459c;
	--pysh-accent-hover: #1a3378;
	--pysh-accent-soft: #e7ecf9;
	--pysh-accent-contrast: #ffffff;

	/* Коректорський червоний — поля, підкреслівки, цифри */
	--pysh-mark: #c02b3f;
	--pysh-mark-soft: #fbe9ec;

	/* Чорнило тексту */
	--pysh-ink: #14192b;
	--pysh-ink-muted: #4d5670;
	--pysh-ink-faint: #606882;

	/* Радіуси — найгостріші в серії */
	--pysh-r-sm: 2px;
	--pysh-r-md: 5px;
	--pysh-r-lg: 9px;

	/* Тіні — холодні й ледь помітні */
	--pysh-shadow-sm: 0 1px 2px rgba(20, 25, 43, .05);
	--pysh-shadow-md: 0 8px 24px rgba(20, 25, 43, .07);

	/* Розмірності блоків теми */
	--pysh-margin-w: 3px;   /* товщина червоної лінії поля */
	--pysh-rule-h: 1px;     /* лінія в заголовку секції */
	--pysh-progress-h: 3px;

	/* --------------------------------------------------------------------
	 * Те саме, але мовою Osnova. Батьківський скін увесь на цих токенах,
	 * тож достатньо підставити свої значення — і жодного правила
	 * перебивати не треба.
	 * ----------------------------------------------------------------- */

	--osn-font-display: var(--pysh-font-display);
	--osn-font-body: var(--pysh-font-body);

	--osn-accent: var(--pysh-accent);
	--osn-accent-hover: var(--pysh-accent-hover);
	--osn-accent-soft: var(--pysh-accent-soft);
	--osn-accent-contrast: var(--pysh-accent-contrast);

	--osn-ink: var(--pysh-ink);
	--osn-ink-muted: var(--pysh-ink-muted);
	--osn-ink-faint: var(--pysh-ink-faint);

	--osn-bg: var(--pysh-bg);
	--osn-surface: var(--pysh-surface);
	--osn-surface-alt: var(--pysh-surface-alt);
	--osn-line: var(--pysh-line);
	--osn-line-strong: var(--pysh-line-strong);

	--osn-r-sm: var(--pysh-r-sm);
	--osn-r-md: var(--pysh-r-md);
	--osn-r-lg: var(--pysh-r-lg);

	--osn-shadow-sm: var(--pysh-shadow-sm);
	--osn-shadow-md: var(--pysh-shadow-md);

	--osn-container: 1220px;
	--osn-gap: 44px;
	--osn-sidebar: 316px;
	--osn-prose: 66ch;

	--osn-fs-body: 17px;
	--osn-fs-small: 15px;
	--osn-fs-meta: 13px;
	--osn-fs-kicker: 12px;
	--osn-lh-body: 1.7;
	--osn-track-caps: .09em;
}