/* Design tokens, pulled straight from the Stuurmaat Figma file. */
:root {
	/* Colors */
	--sm-darkblue: #201dbe;
	--sm-lightblue: #e5f5ff;
	--sm-white: #ffffff;
	--sm-green: #699732;
	--sm-purple: #8387eb;
	--sm-navy: #052138;
	--sm-navy-10: rgba(5, 33, 56, 0.1);
	--sm-navy-20: rgba(5, 33, 56, 0.2);
	--sm-nav-bg: rgba(255, 255, 255, 0.9);
	--sm-nav-border: rgba(32, 29, 190, 0.1);
	--sm-nav-active: #f0efff;
	--sm-lightblue-60: rgba(229, 245, 255, 0.6);

	/* Type */
	--sm-font-body: 'Onest', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--sm-font-display: 'Bricolage Grotesque', var(--sm-font-body);

	/* One consistent reading size across all regular body copy. */
	--sm-text-sm: 20px;
	--sm-text-md: 20px;
	--sm-text-lg: 20px;
	--sm-text-xl: 38.67px;
	--sm-text-2xl: 48.67px;
	--sm-text-3xl: 68.67px;
	--sm-text-4xl: 70.84px;

	/* Layout */
	--sm-container: 1512px;
	--sm-gutter: 116px;
	--sm-radius: 8px;
	--sm-radius-sm: 4px;

	color-scheme: light;
}

@media (max-width: 1000px) {
	:root {
		--sm-gutter: 24px;
		--sm-text-3xl: 44px;
		--sm-text-4xl: 44px;
		--sm-text-2xl: 34px;
	}
}

@media (max-width: 800px) {
	:root {
		--sm-gutter: 16px;
		--sm-text-4xl: 42px;
		--sm-text-3xl: 40px;
		--sm-text-2xl: 32px;
		--sm-text-xl: 30px;
		--sm-text-sm: 15px;
		--sm-text-md: 15px;
		--sm-text-lg: 15px;
	}
}