/*
 * Design tokens (docs/KICKOFF.md §5). Every color and type size in the theme comes from here.
 * The palette is mirrored in theme.json for the editor — keep them in sync.
 *
 * Breakpoints (can't be custom properties in media queries; use these literals):
 *   max-width: 899.98px  → phone/tablet layout (hamburger, stacked splits, cards)
 *   max-width: 599.98px  → small phones
 *   Content caps at 1280px; beyond that gutters grow.
 */

:root {
	/* Color */
	--paper: #fbfbfa;
	--paper-2: #f5f4f1;
	--paper-hover: #f3f2ef;
	--ink: #1a1a1a;
	--ink-inverse: #fbfbfa;
	--rule: #1a1a1a;
	--rule-soft: #e6e4de;
	--rule-input: #cfccc4; /* decorative borders only */
	--rule-field: #8c8a84; /* form field outlines: 3.1:1 on paper-2 (WCAG 1.4.11) */
	--image-bg: #e4e3df;
	--text-1: #22282e; /* article body (Post.dc.html); not in the §5 list */
	--text-2: #4a5158;
	--text-3: #5b636b;
	--text-4: #686f75; /* 4.6:1 on paper-2 (was #71797f, failed AA) */
	--text-5: #6e6e68; /* 4.6:1 on paper-2 (was #8b8b84, failed AA) */
	--text-6: #70706b; /* placeholders; 4.5:1 on paper-2 (was #9a9a92) */
	--accent: #4d5a66;

	/* On-ink surfaces (mobile menu panel, lightbox): use --ink-text-2 for secondary text, never --text-5. */
	--ink-rule: #3d3d3d;
	--ink-underline: #6a6a68;
	--ink-text-2: #9a9a92;

	/* Families */
	--font-serif: "Instrument Serif", Georgia, serif;
	--font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	/*
	 * Serif sizes scale fluidly from the 390px phone mock to the 1280px desktop mock:
	 * calc(min + (max − min) × (100vw − 390px) / 890)
	 */
	--fs-display: clamp(40px, calc(40px + 34 * (100vw - 390px) / 890), 74px);
	--fs-page-title: clamp(40px, calc(40px + 22 * (100vw - 390px) / 890), 62px);
	--fs-show-title: clamp(52px, calc(52px + 24 * (100vw - 390px) / 890), 76px);
	--fs-post-title: clamp(40px, calc(40px + 26 * (100vw - 390px) / 890), 66px);
	--fs-section: clamp(30px, calc(30px + 14 * (100vw - 390px) / 890), 44px);
	--fs-row-title: clamp(21px, calc(21px + 5 * (100vw - 390px) / 890), 26px);
	--fs-footer-heading: clamp(28px, calc(28px + 6 * (100vw - 390px) / 890), 34px);

	/* Sans / mono sizes step at 900px */
	--fs-body: 16px;
	--fs-lede: 17px;
	--fs-article: 18.5px;
	--fs-small: 14px;
	--fs-label: 11px;
	--fs-label-sm: 10px;

	--lh-body: 1.7;
	--lh-article: 1.78;
	--tracking-label: 0.14em;
	--tracking-eyebrow: 0.16em;

	/* Layout */
	--page-max: 1280px;
	--gutter: 40px;
	/* Horizontal padding for full-width bands: the gutter, widened so content stays ≤ --page-max. */
	--pad-x: max(var(--gutter), calc((100% - var(--page-max)) / 2 + var(--gutter)));
	--measure: 720px;
	--nav-h: 62px;
	--bar-h: 0px; /* mobile contact bar height; set below 900px */
	--tap: 56px;

	/* Motion */
	--ease: cubic-bezier(0.2, 0, 0, 1);
	--dur: 160ms;
}

@media (max-width: 899.98px) {
	:root {
		--gutter: 18px;
		--nav-h: 56px;
		--bar-h: 52px;
		--fs-body: 15.5px;
		--fs-lede: 15.5px;
		--fs-article: 17px;
		--fs-label: 10px;
		--fs-label-sm: 9.5px;
	}
}

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