*
{
	box-sizing: border-box;
}

body
{
	margin:0;
}

html
{
	font-family:var(--preferred-font), system-ui, sans-serif;
}

:root
{
	--dominant:#FFFDFB;
	--secondary:#425B6D;
	--accent:#E4D072;

	--background:var(--dominant);
	--foreground:var(--secondary);
	--preferred-font:'Assistant';
	--layout-margin-x:min(4%, 4vw, 2rem);
}

.theme-color
{
	background-color: var(--background);
}

.theme-color,
.theme-inline
{
	color:var(--foreground);
}

.theme-accent-bg
{
	background-color: var(--accent);
}

.theme-accent-inline
{
	color:var(--accent);
}

main#root
{
	&>h1#page-header
	{
		font-size: 2.25rem;
		font-weight: bold;
	}

	&>p#page-message
	{
		font-size: 1.25rem;
	}
	padding-inline:var(--layout-margin-x);
}

@media screen and (prefers-color-scheme: dark)
{
	:root
	{
		--dominant:#2F3D4B;
		--secondary:#F2FBFD;
		--accent:#FFEA98;
	}
}