@import url('./styles/reset.scss');
@import url('./styles/typography.scss');
@import url('./styles/components/button.scss');

:root {
	--color-primary: oklch(0.327 0.057852 184.2083);
	--color-on-primary: white;
	--color-primary-container: oklch(0.5247 0.0849 184.3);
	--color-primary-container-alt: oklch(from var(--color-primary-container) 0.565 c h);
	--color-on-primary-container: white;

	--color-secondary: oklch(0.3394 0.0927 273.22);
	--color-on-secondary: white;
	--color-secondary-container: oklch(0.5379 0.0899 276.11);
	--color-on-secondary-container: white;

	--color-tertiary: oklch(0.3384 0.0788 60.74);
	--color-on-tertiary: white;
	--color-tertiary-container: oklch(0.5416 0.1017 61.52);
	--color-on-tertiary-container: white;

	--color-error: oklch(0.3413 0.087 34.27);
	--color-on-error: white;
	--color-error-container: oklch(0.5441 0.0989 34.26);
	--color-on-error-container: white;

	--color-surface: oklch(0.9816 0.0055 211.04);
	--color-on-surface: oklch(0.1764 0.0095 208.78);
	--color-surface-container: oklch(0.9297 0.0066 208.78);

	--color-outline: oklch(0.4386 0.0119 212.57);
	--color-outline-variant: oklch(0.5336 0.0123 204.04);

	--color-shadow: oklch(0.3396 0.0743 281.7 / 25%);
	--color-shadow-variant: oklch(0 0 0 / 30%);

	--box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;

	font-family: system-ui, sans-serif;
	font-size: 62.5%;
	font-weight: 400;
}

body {
	margin: 0;
}