/*
	ein sehr vereinfachtes einfaches farbmodel um zwischen light und dark mode zu wechseln,
	ohne für jedes ui element einzeln farben zu definieren, das führte nur ins chaos

	ein brauchbares ui muss in weniger als vielleicht 10 farben zu definieren sein


	todo::
		radio buttons in old ui sind unsichtbar im lightmode
*/
:root {
	/* hintergrund von hinten (0) nach vorne (1,2,3) */
	--ce-bg-A: var(--color1);				/* noch dunkler als standard app hintergrund */
	--ce-bg-0: var(--colorA);				/* 0 => hinterster hintergrund  	dunkel */  
	--ce-bg-1: var(--colorBalt);			/* 1 => z.B. eine dashbox 				weniger dunkel */
	--ce-bg-2: var(--color15);    			/* 2 => z.B. ein headerblock einer dashbox 		(stimmt noch nicht?) noch weniger dunkel  */
	--ce-bg-3: var(--colorEalt);			/* 3 => z.B. eine invertierte zahl (membercount) der auf bg1 und bg2 farblich drüber steht 		deutlich heller als bg, button-a-like hervorhebung*/

	--ce-text: var(--btw8);					/* standard textfarbe */
	--ce-text-disabled: var(--btw5);		/* disabled textfarbe, weniger kontrast */

	--ce-border: var(--btw5);				/* z.B. radiobutton border */
	/* hover farbe nach steigender wichtigkeit (0....) */

	--ce-hover-0: var(--color15);          	/* schwaches blau, geringes highlight in listen z.B. */
	--ce-hover-1: var(--colorC);			/* helleres blau, icons oder actions wie links/breadcrump */
	--ce-hover-2: var(--cuegreen);          /* starkes cuegrün, ein hover der auch über den ce-active hinweg wirkt */
	--ce-hover-3: var(--colorH);   			/* orange aktuell, aus not (save disk in export), muss sogar noch über hover hovern */

	--ce-active: var(--color2);				/* z.B. ein aktiver tab (bg) */
	--ce-active-1: var(--colA10);			/* noch kontrastreichere farbe für aktive z.B. radio buttons */
	--ce-button: var(--color2);				/* ein button wie verbinden */
	
	--ce-paper: rgb(167, 167, 167);		/* pdf papier */

	--ce-black:	black;						/* sachen die definiv schwarz sein sollen, und auf hellerem grund liegen müssen */
	--ce-error:	red;						/* warn farbe im sinne von rot :) */
}
[data-theme="light"] {
	--ce-bg-A: var(--btw9);					/* noch heller oder gleich standard app hintergrund */
	--ce-bg-0: var(--btw9);
	--ce-bg-1: var(--btw8);					/* 1 => z.B. eine dashbox 				weniger dunkel */
	--ce-bg-2: var(--btw7);    				/* 2 => z.B. ein headerblock einer dashbox 		(stimmt noch nicht?) noch weniger dunkel  */
	--ce-bg-3: var(--btw6);					/* 3 => z.B. eine invertierte zahl (membercount) der auf bg1 und bg2 farblich drüber steht 		deutlich heller als bg, button-a-like hervorhebung*/

	--ce-text: var(--btw0);
	--ce-border: var(--btw5);				/* z.B. radiobutton border */


	--ce-hover-0: var(--btw7);          	/* schwaches blau, geringes highlight in listen z.B. */
	--ce-hover-1: var(--colorC);			/* helleres blau, icons oder actions wie links/breadcrump */
	--ce-hover-2: var(--cuegreen);          /* starkes cuegrün, ein hover der auch über den ce-active hinweg wirkt */
	--ce-hover-3: var(--colorH);   			/* orange aktuell, aus not (save disk in export), muss sogar noch über hover hovern */

	--ce-active: var(--color7);				/* z.B. ein aktiver tab (bg) */
	--ce-active-1: var(--colA10);			/* noch kontrastreichere farbe für aktive z.B. radio buttons */

	--ce-button: var(--color7);				/* ein button wie verbinden */
}