/* 1838 — design tokens. Values copied from the approved preview / 04_DESIGN_SYSTEM.md.
   Change a value here, never in a component. Motion tokens live in motion.css. */

:root {
	/* Colour — site palette */
	--c-paper: #E5DCD6;
	--c-plate: #EFE7E1;
	--c-band: #345347;
	--c-accent: #538070;
	--c-ink: #312A24;
	--c-ink-soft: #403933;
	--c-ink-quiet: #625952;
	--c-ink-faint: #6A6159;
	--c-ink-colophon: #827871;
	--c-rule: #CBBEB4;
	--c-rule-strong: #A79C93;
	--c-rule-green: #6B8A7C;
	--c-on-band: #EFE7E1;
	--c-error: oklch(0.48 0.09 32);

	/* Type */
	--f-serif: Georgia, 'Times New Roman', serif;
	--f-mono: ui-monospace, 'Courier New', monospace;

	--t-h1: clamp(34px, 3.4vw, 54px);
	--t-h1-lh: 1.16;
	--t-h1-ls: -0.012em;
	--t-h2: clamp(24px, 2vw, 30px);
	--t-h2-lh: 1.18;
	--t-h2-ls: -0.014em;
	--t-lead: clamp(20px, 1.6vw, 24px);
	--t-body: 17px;
	--t-body-lh: 1.7;
	--t-small: 15px;
	--t-field: 18px;

	--t-mono: 12px;
	--t-mono-s: 11.5px;
	--t-mono-xs: 11px;
	--t-mono-btn: 12.5px;
	--ls-label: 0.22em;
	--ls-mono: 0.16em;
	--ls-btn: 0.2em;
	--ls-foot: 0.14em;

	/* Layout */
	--inner: 1344px;
	--gutter: clamp(26px, 8vw, 128px);
	--band-y: clamp(68px, 7.5vw, 120px);
	--band-y-lg: clamp(72px, 8.75vw, 140px);
	--hero-top: clamp(56px, 6vw, 96px);
	--head-gap: clamp(40px, 4vw, 66px);
	--col-gap: clamp(48px, 10vw, 164px);
	--header-top: clamp(40px, 5.25vw, 84px);
}

@media (max-width: 767px) {
	:root {
		--t-body: 16px;
	}
}