:root {
	--gap_unit: 16px;
	--gap_half: calc(var(--gap_unit) / 2);
	--wide_input: 600px;
	--gap_double: calc(var(--gap_unit) * 2);

	--font_size_base: 16px;

	--hue: 240;

	--text_color_normal: #000000;
	--text_color_light: hsl(var(--hue), 15%, 60%);
	--text_color_light_hover: hsl(var(--hue), 15%, 50%);

	--very_dark_gray: hsl(var(--hue), 15%, 40%);
	--very_dark_gray_hover: hsl(var(--hue), 15%, 30%);

	--generic_border_color: var(--text_color_light);

	--primary_color_dark: #000080;
	--primary_color_light: #1084d0;
	--link_color: hsl(202, 100%, 30%);
	--link_color_light: hsl(202, 40%, 60%);

	--focus_color: var(--primary_color_dark);
	--focus_outline_width: 4px;

	--attention_red: #d40000;

	--background: hsl(var(--hue), 15%, 95%);
	--accent_background: hsl(var(--hue), 15%, 90%);
	--white: #fff;
	--input_background: var(--white);
	--input_disabled_background: hsl(var(--hue), 15%, 90%);

	--default_border_radius: 2px;
}

@media (max-width: 800px), (max-height: 500px) {
	:root {
		--gap_unit: 8px;
		--font_size_base: 14px;
	}
}