/* Wren website tokens. Radius rule: surfaces 16px, controls 10px, chips 999px. */
@font-face {
	font-family: 'Geist';
	src: url('/fonts/Geist-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}
@font-face {
	font-family: 'Geist Mono';
	src: url('/fonts/GeistMono-Variable.woff2') format('woff2');
	font-weight: 100 900;
	font-display: swap;
}

:root {
	--bg: #f6f7f8;
	--surface: #fdfdfd;
	--surface-2: #eff1f3;
	--ink: #15181c;
	--ink-2: #3a4049;
	--muted: #646d78;
	--line: #e1e4e8;

	--accent: #c2410c;
	--accent-ink: #9a3412;
	--accent-soft: #fbe9de;
	--on-accent: #fff8f4;

	--good: #0f7a4f;
	--danger: #b42318;

	--shadow: 0 1px 2px rgba(21, 24, 28, 0.06), 0 8px 24px -12px rgba(21, 24, 28, 0.18);
	--shadow-lg: 0 30px 80px -30px rgba(40, 24, 14, 0.35);

	--r-surface: 16px;
	--r-stage: 24px;
	--r-control: 10px;
	--r-pill: 999px;

	--wrap: 1180px;
	--gutter: 24px;
	--section: 96px;
	--section-tight: 64px;

	--font-sans: 'Geist', ui-sans-serif, system-ui, sans-serif;
	--font-mono: 'Geist Mono', ui-monospace, monospace;
	--text-body: 17px;
	--text-lede: 19px;
	--text-small: 14px;
	--h-hero: clamp(40px, 5.2vw, 62px);
	--h-page: clamp(36px, 4.4vw, 54px);
	--h-section: clamp(30px, 3.4vw, 44px);
	--weight-heading: 650;
	--tracking-heading: -0.025em;

	--control-h: 46px;
	--control-h-sm: 38px;
	--input-h: 44px;

	--ease: cubic-bezier(0.16, 1, 0.3, 1);

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0e1012;
		--surface: #15181b;
		--surface-2: #1c2024;
		--ink: #eceef0;
		--ink-2: #c7ccd2;
		--muted: #969ea8;
		--line: #2a2f35;
		--accent: #f0703a;
		--accent-ink: #ff9a6b;
		--accent-soft: rgba(240, 112, 58, 0.14);
		--on-accent: #1a0d06;
		--good: #4ccf8f;
		--danger: #ff8a7a;
		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
		--shadow-lg: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
	}
}

@media (max-width: 760px) {
	:root {
		--gutter: 16px;
		--section: 64px;
		--text-body: 16px;
	}
}