:root {
	--kit-green: light-dark(rgb(0, 150, 130), #356e63);
	--kit-green2: light-dark(rgb(191, 228, 223), #a1beb9);
	--kit-blue: light-dark(rgb(35, 161, 224), #3e759c);
	--kit-blue2: light-dark(rgb(77 178 229), #3e759c);
	--kit-yellow: light-dark(rgb(223, 155, 27), #a07231);
	--kit-red: light-dark(rgb(179, 76, 77), #974546);
	--kit-white: rgb(255, 255, 255);

	/* general */
	--main-margin-inline: max(
		50% - 600px,
		min(25%, 50% - 350px)
	);
	--main-margin-bottom: max(
		var(--navigation-mobile-height),
		var(--topbar-height)
	);
	--background-color-darkmode: #232227;
	--website-background-color: light-dark(
		var(--kit-white),
		var(--background-color-darkmode)
	);
	--main-margin: 0 var(--main-margin-inline) 0;
	--main-padding: 1em;
	--text-color: light-dark(black, var(--kit-white));
	--inverted-text-color: light-dark(var(--kit-white), black);
	--examiner-list-subheading-text-color: light-dark(gray, #ccc9cc);
	--examiner-list-subheading-link-color: light-dark(#1a7db8, #53a9cd);
	--hr-top-margin: calc(3 * var(--button-padding));
	--table-row-highlight: light-dark(#e9e9e9, #181418);
	--table-cell-divide-border: 1px solid var(--divider-color);
	--disabled-background-color: light-dark(#e4e4e4, #b7b5b7);

	--hard-divider-color: light-dark(gray, #5c585b);
	--divider-color: light-dark(lightgray, #433d43);

	/* components */
	--container-min-size: 96%;
	--container-border: 2px solid light-dark(black, #898688);
	--container-rounding: 1em;
	--container-divider: var(--table-cell-divide-border);
	--container-space: 1.5rem;

	--comment-text-color: light-dark(gray, #a0a0a0);
	--comment-font-size: 75%;
	--comment-line-height: 1em;

	--input-border: var(--input-border-thickness) solid var(
		--input-border-color
	);
	--input-border-color: light-dark(gray, #948f94);
	--input-border-thickness: 1px;
	--input-rounding: 0.5rem;

	--button-padding: 0.5rem;
	--button-on-input-padding: calc(
		var(--button-padding) + var(--input-border-thickness)
	);
	--button-gap: 1.5ch;
	--button-text-color: var(--kit-white);
	--admin-demote-button-disabled: light-dark(gray, #1a121a);

	--exam-list-padding: calc(1.5 * var(--button-padding));
	--exam-list-margin: calc(2 * var(--button-padding));

	--first-exam-slot-divider-margin: var(--exam-list-padding) 0 0;

	/* topbar */
	--topbar-text-color: var(--kit-white);
	--topbar-background: var(--kit-green);
	--topbar-height: 3em;
	--topbar-font-size-factor: 1.25;
	--topbar-element-padding: 0 1rem;
	--topbar-box-shadow: light-dark(#999, #201f20);

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

	/* footer */
	--footer-size-with-margin: calc(
		1lh + var(--footer-margin) + 2 * var(--footer-padding)
	);
	--footer-padding: 1lh;
	--footer-margin: 1lh;
}

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

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

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

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