@font-face {
	font-family: "Bricolage Grotesque";
	src: url("./bricolage-grotesque-variable.woff2") format("woff2");
	font-weight: 100 1000;
}

:root {
	/* fonts */
	--font-body: "Bricolage Grotesque", sans-serif;

	/* colors */
	--color-background: light-dark(white, #1e1e1e);
	--color-text: light-dark(black, white);

	/* sizes */
	--size-border: 1px;
	--size-outline: 3px;
	--size-1: 2px;
	--size-2: 4px;
	--size-3: 8px;
	--size-4: 12px;
	--size-5: 16px;
	--size-6: 20px;
	--size-7: 24px;
	--size-8: 28px;
	--size-9: 32px;
	--size-10: 48px;

	/* corner radii */
	--radius-sm: 2px;
	--radius-md: 6px;
	--radius-lg: 8px;
	--radius-xl: 12px;
}

@supports (corner-shape: squircle) {
	* {
		corner-shape: squircle;
	}

	:root {
		--radius-sm: 4px;
		--radius-md: 12px;
		--radius-lg: 16px;
		--radius-xl: 24px;
	}
}

:root {
	color-scheme: light dark;

	&[data-theme="light"] {
		color-scheme: light;
	}

	&[data-theme="dark"] {
		color-scheme: dark;
	}
}