:root {
	--kit-green: light-dark(
		rgb(0, 150, 130),
		color-mix(rgb(0, 150, 130) 100%, #1a121a 30%)
	);
	--kit-green2: light-dark(
		rgb(191, 228, 223),
		color-mix(rgb(191, 228, 223) 100%, #1a121a 15%)
	);
	--kit-blue: light-dark(
		rgb(35, 161, 224),
		color-mix(rgb(35, 161, 224) 100%, #1a121a 30%)
	);
	--kit-blue2: light-dark(
		rgb(77 178 229),
		color-mix(rgb(77 178 229) 100%, #1a121a 40%)
	);
	--kit-yellow: light-dark(
		rgb(223, 155, 27),
		color-mix(rgb(223, 155, 27) 100%, #1a121a 30%)
	);
	--kit-red: light-dark(
		rgb(179, 76, 77),
		color-mix(rgb(179, 76, 77) 100%, #1a121a 15%)
	);
	--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: color-mix(#3a323a 100%, #1a121a 25%);
	--website-background-color: light-dark(
		var(--kit-white),
		var(--background-color-darkmode)
	);
	--main-margin: 0 var(--main-margin-inline) var(--main-margin-bottom);
	--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,
		color-mix(var(--kit-white) 100%, #1a121a 25%) /* TOSODO ??? */
	);
	--examiner-list-subheading-link-color: light-dark(
		#1a7db8,
		color-mix(#5ac7f2, #1a121a 15%)
	); /* TOSODO ??? */
	--hr-top-margin: calc(3 * var(--button-padding));
	--table-row-highlight: light-dark(
		#e9e9e9,
		color-mix(#e9e9e9 0%, #1a121a 50%) /* TOSODO ??? */
	);
	--table-cell-divide-border: 1px solid var(--divider-color);
	--disabled-background-color: light-dark(
		#e4e4e4,
		color-mix(#e4e4e4 100%, #1a121a 25%) /* TOSODO ??? */
	);

	--hard-divider-color: light-dark(
		gray,
		color-mix(gray 100%, #1a121a 25%) /* TOSODO ??? */
	);
	--divider-color: light-dark(
		lightgray,
		color-mix(gray 100%, #1a121a 100%) /* TOSODO ??? */
	);

	/* components */
	--container-min-size: 96%;
	--container-border: 2px solid light-dark(
		black,
		color-mix(var(--kit-white) 100%, #1a121a 50%)
	);
	--container-rounding: 1em;
	--container-divider: var(--table-cell-divide-border);

	--comment-text-color: light-dark(
		gray,
		color-mix(var(--kit-white) 100%, #1a121a 25%) /* TOSODO ??? */
	);
	--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,
		color-mix(white 100%, #1a121a 75%) /* TOSODO ??? */
	);
	--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 /* TOSODO ??? */);

	--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, color-mix(#222 100%, #1a121a 25%));

	--navigation-border: 1px solid var(--kit-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(--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);
}