:root {
	--kit-green: rgb(
		0,
		150,
		130
	);
	--kit-green2: rgb(
		191,
		228,
		223
	);
	--kit-blue: rgb(
		35,
		161,
		224
	);
	--kit-red: rgba(
		162,
		34,
		35
	);

	/* general */
	--text-color: light-dark(
		black,
		white
	);

	/* components */
	--container-min-size: 96%;
	--container-border: 2px solid black;
	--container-rounding: 1em;

	--button-padding: 0.5rem;
	--button-gap: 1.5ch;

	/* topbar */
	--topbar-text-color: white;
	--topbar-background: var(--kit-green);
	--topbar-height: 3em;
	--topbar-element-padding: 0 1rem;

	--navigation-border: 1px solid white;
	--navigation-mobile-height: 3rem;
	--navigation-hover-background: var(--kit-green2);
	--navigation-hover-text-color: var(--kit-green);
}

.blue {
	--component-background: var(--kit-blue);
	--component-text-color: white;
}

.green {
	--component-background: var(--kit-green);
	--component-text-color: white;
}