:root {
	--kit-green: rgb(0, 150, 130);
	--kit-green2: rgb(191, 228, 223);
	--kit-blue: rgb(35, 161, 224);
	--kit-yellow: rgb(223, 155, 27);
	--kit-red: rgb(179, 76, 77);
	--kit-white: rgb(255, 255, 255);

	/* general */
	--main-margin: 0 max(50% - 600px, min(25%, 50% - 300px)) max(
		var(--navigation-mobile-height),
		var(--topbar-height)
	);
	--text-color: light-dark(black, white);
	--hr-top-margin: calc(3 * var(--button-padding));
	--table-row-highlight: #e9e9e9;
	--table-cell-divide-border: 1px solid lightgray;

	/* components */
	--container-min-size: 96%;
	--container-border: 2px solid black;
	--container-rounding: 1em;
	--container-divider: var(--table-cell-divide-border);

	--input-border: 1px solid gray;
	--input-rounding: 0.5rem;

	--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: var(--kit-white);
}

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

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

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