/*
 * Motif brand tokens (CONTRACT §2). Zero specificity (:where) so a theme (Etch + Automatic.css) can override
 * any of them. Fonts are never bundled: the font variables default to `inherit` and the site decides.
 */
:where(:root) {
	/* Colour */
	--motif-paper: #ffffff;
	--motif-mist: #f3f5f0;
	--motif-ink: #0b0c0e;
	--motif-ink-soft: #4a4d52;
	--motif-ink-quiet: #62666d;
	--motif-line: #e3e6df;
	--motif-forest: #0e3b33;
	--motif-forest-hover: #0a2e28;
	--motif-lime: #d4f55b;
	--motif-lime-soft: #edfbba;
	--motif-olive: #80a741;
	--motif-sage: #e4efeb;
	--motif-peach: #ffe3d1;
	--motif-sky: #dcebff;

	/* Type (Chillax headings, Graphik UI, Geist Mono labels when the theme provides them) */
	--motif-font-body: inherit;
	--motif-font-display: inherit;
	--motif-font-mono: inherit;
	--motif-font-fallback: Geist, system-ui, sans-serif;
	--motif-line-height: 1.6;
	--motif-label-tracking: 0.08em;

	/* Shape: controls 8, cards/images/panels/popovers 13, tags/badges 5 */
	--motif-radius-control: 8px;
	--motif-radius-card: 13px;
	--motif-radius-tag: 5px;

	/* Spacing scale */
	--motif-space-1: 5px;
	--motif-space-2: 8px;
	--motif-space-3: 13px;
	--motif-space-4: 21px;
	--motif-space-5: 34px;
	--motif-space-6: 55px;
	--motif-space-7: 89px;

	/* Buttons */
	--motif-button-height: 44px;
	--motif-button-padding: 0 21px;
	--motif-button-font-size: 15px;

	/* Motion */
	--motif-duration: 200ms;
	--motif-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--motif-transition: var(--motif-duration) var(--motif-ease);
}

@media (prefers-reduced-motion: reduce) {
	:where(:root) {
		--motif-duration: 0ms;
	}
}