@font-face {
	font-family: "Berkeley Mono Variable NW6496PV";
	font-display: block;
	src: url(https://cdn.remexre.com/pkg/BerkeleyMonoVariable-NW6496PV/BerkeleyMonoVariable-NW6496PV.woff2) format("woff2");
}

@font-face {
	font-family: "Host Grotesk";
	font-style: normal;
	font-display: block;
	src: local("Host Grotesk"), url(https://cdn.remexre.com/pkg/google-fonts/HostGrotesk-VariableFont_wght.woff2) format("woff2");
}

@font-face {
	font-family: "Host Grotesk";
	font-style: italic;
	font-display: block;
	src: local("Host Grotesk"), url(https://cdn.remexre.com/pkg/google-fonts/HostGrotesk-Italic-VariableFont_wght.woff2) format("woff2");
}

@font-face {
	font-family: "Noto Sans Math";
	font-display: block;
	src: local("Noto Sans Math"), url(https://cdn.remexre.com/pkg/google-fonts/NotoSansMath-Regular.woff2) format("woff2");
}

:root {
	--font-text: "Host Grotesk", sans-serif;
	--font-code: "Berkeley Mono Variable NW6496PV", monospace;
	--font-symbols: "Noto Sans Math", monospace;

	--color-body-bg: #d4d4d8;
	--color-surface: #f4f4f5;
	--color-surface-raised: #e4e4e7;
	--color-text: #09090b;
	--color-text-muted: #71717a;
	--color-shadow: rgba(0, 0, 0, 0.2);
	--color-shadow-active: rgba(0, 0, 0, 0.15);

	--color-accent-info: #3b82f6;
	--color-accent-success: #16a34a;
	--color-accent-warning: #d97706;
	--color-accent-danger: #dc2626;

	--border-width: 2px;
	--border-width-thin: 1.5px;
	--shadow-offset: 2px 2px;

	--space-1: 0.25em;
	--space-2: 0.5em;
	--space-3: 1em;
	--space-4: 2em;
}