:root {
	--brand-h: 217;
	--brand-s: 91%;
	--brand-l: 60%;
	--brand: hsl(var(--brand-h), var(--brand-s), var(--brand-l));
	--bg: #ffffff;
	--surface: #f7f7fa;
	--text: #1d1f23;
	--muted: #6b7280;

	--radius-sm: .375rem;
	--radius: .75rem;
	--radius-lg: 1.25rem;

	--space-1: .25rem;
	--space-2: .5rem;
	--space-3: .75rem;
	--space-4: 1rem;
	--space-6: 1.5rem;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .05), 0 1px 1px rgba(0, 0, 0, .04);
	--shadow-2: 0 10px 20px rgba(0, 0, 0, .08);
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #0f1216;
		--surface: #141821;
		--text: #e5e7eb;
		--muted: #9aa3b2;
	}
}

body {
	background: var(--bg);
	color: var(--text);
}