/*
 * Токени дизайн-системи -- єдине місце, де живуть кольори, шрифти,
 * відступи й тіні сайту. ui.css і shop.css беруть значення лише звідси
 * (тест tests/test_design_tokens.py). Значення зняті з теми (style.css,
 * post.css) і зведені докупи; див.
 * docs/superpowers/specs/2026-10-21-design-system-design.md §3.
 *
 * Помаранчевий бренду лишається заливкою; текст на ньому -- майже чорний
 * (білий дає 2,76:1), а помаранчевий текст на світлому -- темніший
 * --c-accent-text.
 */

:root {
	/* Колір */
	--c-accent: #ff7100;
	--c-accent-text: #b84a00;
	--c-on-accent: #16171b;
	--c-accent-tint: #fff3e8;
	--c-ink: #16171b;
	--c-ink-raised: #1f2024;
	--c-text: #35363a;
	--c-text-muted: #6b6b72;
	--c-on-dark: #ffffff;
	--c-on-dark-muted: #d1d1d7;
	--c-surface: #ffffff;
	--c-surface-muted: #f6f6f6;
	--c-surface-strong: #ececec;
	--c-border: rgba(22, 23, 27, .5);
	--c-border-light: rgba(22, 23, 27, .12);
	--c-on-dark-fill: rgba(255, 255, 255, .05);
	--c-on-dark-fill-hover: rgba(255, 255, 255, .08);
	--c-on-dark-border: rgba(255, 255, 255, .5);
	--c-on-dark-line: rgba(255, 255, 255, .15);
	--c-overlay: rgba(22, 23, 27, .6);
	--c-success: #2e9e4f;
	--c-success-bg: #e6f4ea;
	--c-success-fg: #14532d;
	--c-danger: #d9342b;
	--c-danger-bg: #fde8e6;
	--c-danger-fg: #7f1d1d;
	--c-danger-on-dark: #ff8a80;
	--c-warning-fg: #7c2d12;
	--c-focus: #16171b;
	--c-focus-on-dark: #ff7100;

	/* Шрифт: розмір / висота рядка, вага задається окремо */
	--f-family: Raleway, system-ui, sans-serif;
	--t-display: 56px/1.25;
	--t-h1: 30px/1.25;
	--t-h2: 24px/1.3;
	--t-h3: 20px/1.3;
	--t-body: 17px/1.5;
	--t-body-sm: 15px/1.5;
	--t-small: 14px/1.4;
	--t-label: 13px/1.45;

	/* Відступи */
	--s-1: 5px;
	--s-2: 10px;
	--s-3: 15px;
	--s-4: 20px;
	--s-5: 25px;
	--s-6: 30px;
	--s-7: 40px;
	--s-8: 50px;
	--s-9: 60px;
	--s-10: 80px;

	/* Межі, тіні, рух, контроли */
	--r-pill: 999px;
	--sh-1: 0 3px 13px rgba(22, 23, 27, .08);
	--sh-2: 0 4px 15px rgba(0, 0, 0, .15);
	--t-fast: .25s;
	--t-base: .35s ease-out;
	--control-h: 56px;
}

@media (max-width: 767px) {
	:root {
		--t-display: 30px/1.25;
		--t-h1: 24px/1.3;
		--control-h: 48px;
	}
}