:root {
	/* colors */
	/*  --> not categorized but used */
	--c-main_black: #000000;
	--c-main_dark-grey: #535251;
	--c-main_dark-grey-66: color(from var(--c-main_black) srgb r g b / 0.66);
	--c-main_light-grey: #C4C4C4;
	--c-main-background: var(--c-main_light-grey);
	--c-main_white: #FFFFFF;
	
	/*	--> Main CD Colors */
	--c-main_cd-color-1: #9BC31E;
	--c-main_cd-buttons: var(--c-main_cd-color-1);
	--c-main_cd-color-2: #528530;
	--c-main_cd-links: var(--c-main_cd-color-2);
	--c-main_cd-color-3: #C5DC7E;
	--c-main_cd-decals: var(--c-main_cd-color-3);
	--c-main_cd-headline: var(--c-main_black);
	--c-main_cd-copytext: var(--c-main_dark-grey);
	--c-main_cd-background: var(--c-main_white);
	--c-main_cd-background-66: color(from var(--c-main_cd-background) srgb r g b / 0.66);
	
	/*	--> UserRole Colors */
	--c-role_employee: #528530;
	--c-role_employee_light: #9BC31E;
	--c-role_tester: #4B9CD6;
	--c-role_tester_light: #B5D1E5;
	--c-role_client: #E6B330;
	--c-role_client_light: #FFDF8E;
	--c-role_admin: #E66730;
	--c-role_admin_light: #FFB08D;
	
	/*	--> Signal Colors */
	--c-signal_traffic-green: #9BC31E;
	--c-signal_success: var(--c-signal_traffic-green);
	--c-signal_traffic-yellow: #FFDF8E;
	--c-signal_traffic-red: #EC3C3C;
	--c-signal_alert: var(--c-signal_traffic-red);
	--c-signal_dark-red: #AA0000;
	--c-signal_dark-green: #528530;
	--c-signal_light-green: #C5DC7E;
	--c-signal_disabled: #C4C4C4;
	--c-signal_notification: #E66730;
	
	/* --> colors without alpha */
	--c-main_dark-grey-10percent-alpha: #EDEDED; /* equals: color(from var(--c-main_dark-grey) srgb r g b / 0.1) */
	
	/* --> uk map colors */
	--c-map_area_fill: #d9d9d9;
	--c-map_area_stroke: var(--c-map_area_fill);
	
	--c-map_district_fill: #c4d991;
	--c-map_district_stroke: var(--c-map_district_fill);
	
	--c-map_highlight_district_fill: var(--c-signal_traffic-red);
	--c-map_highlight_district_stroke: var(--c-map_highlight_district_fill);
	
	--c-map_marker_fill: var(--c-signal_traffic-red);
	--c-map_marker_stroke: var(--c-map_marker_fill);
	
	--c-map_text_fill: var(--c-main_dark-grey);
	
	/* spacing: */
	--spacing_s: 8px;
	
	/* dynamic font sizing by viewport width */
	--base: 16;        	   /* in px, e.g. 16 -> 16px */
	--base-width: 1440;	   /* viewport width as used in Figma layout, using the base */
	--min-width: 768;	   /* viewport width as used in Figma layout, using the base */
	--max-width: 1920;	   /* viewport width */
	--scale-max: 1.3;
	
	/* ----- derived values ----- */
	--base-size: calc(var(--base) * 1px);
	--delta-scale: calc(var(--scale-max) - 1);
	
	/* slope (number) so slope * 1vw is a length */
	--slope: calc((var(--base) * var(--delta-scale)) / ((var(--max-width) - var(--base-width)) / 100));
	/* offset to make the line hit base exactly at --base-width */
	--offset: calc(var(--slope) * (var(--base-width) / 100) * 1px);
	
	/* dynamic page size by viewport width */
	--page-width: 1040;  /* page width as used in Figma layout, using the base */
	--page-ratio: calc(var(--page-width) / var(--base-width));
	
	/* tables */
	--datatable-column-gap: calc(var(--base) / var(--base) * 1rem);
	--datatable-row-gap: calc(5 / var(--base) * 1rem);
}

html {
	font-size: clamp(
		var(--base-size),
		calc(var(--base-size) + var(--slope) * 1vw - var(--offset)),
		calc(var(--scale-max) * var(--base-size))
	);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body {
	font-family: Ubuntu;
	
	/* overall body holds:
	  - notification-bar
	  - main-content
	*/
	
	/* see Figma -> main/dark but 10% opacity (which does not work with e.g. opacity: .1) */
	background: color(from var(--c-main_dark-grey) srgb r g b / 0.1);
	
	padding: 0;
	display: flex;
	justify-content: flex-start;
	flex-direction: column;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

* {
	margin: 0;
	padding: 0;
}

a, a:link, a:visited, a:active, .a {
	color: var(--c-main_cd-color-2);
	text-decoration: underline;
	cursor: pointer;
	transition: color .2s;
}

a:hover, .a:hover {
	color: var(--c-main_cd-color-1);
}

h1 *, h2 *, h3 *, h4 *, h5 *, h6 *, p * {
	text-box-trim: trim-both;
}