:root{
	/* role colors */
	--bg-color: var(--white);
	--text-color: var(--black);
	--emphasis-color-1: var(--blue);
	--emphasis-color-2: var(--green);
	--emphasis-color-3: var(--red);
	--nav-bg-color: var(--blue);
	--nav-color-1: var(--blue);
	--nav-color-2: var(--blue);
	--nav-color-3: var(--red);
	--nav-color-4: var(--yellow);
	--nav-color-5: var(--white);
}
@media(prefers-color-scheme: dark){
	:root{
		--bg-color: var(--black);
		--text-color: var(--white);
		--emphasis-color-1: var(--blue-accent);
		--emphasis-color-2: var(--yellow);
		--emphasis-color-3: var(--red-accent);
	}
}