/* sexel theme */

:root {
	--base-line-height: 		1.15;
	--base-font-family: 		'Arial', sans-serif;
	--base-font-smaller: 		12px;
	--base-font-size: 		14px;
	--base-font-larger:		16px;
	--base-font-largest:		18px;
	--base-font-weight: 		normal;
	--base-shadow: 			0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
	--base-background:		#f9f9f9;
	--base-color:			#ccc;
	--base-text:			#333;
	--base-inverse:			#fff;
	--base-border:			1px solid #ccc;
	--base-border-radius:		5px;
	--base-color-tint:		rgb(100, 142, 174);  
	--base-body-color:		rgb(255, 255, 255);
	
	--h1-font-size: 		24px;
	--h2-font-size: 		20px;
	--h3-font-size: 		18px;
	--h4-font-size: 		16px;
	--h5-font-size: 		14px;

	--h1-border: 			3px solid rgb(64, 105, 138);
	--h2-border: 			none;
	--h3-border: 			none;
	--h4-border: 			none;
	--h5-border: 			none;

	--input-box-shadow:		0 0 0 100px rgb(250,250,255) inset;	
	--input-border:			1px solid #ccc;
	--input-boder-radius:		4px;
	--input-font-size:		14px;
	
	--button-background-color:	rgb(100,142,174);
	--button-color:			rgb(250,250,250);
	--button-hover-color:		rgb(87,101,112);
	--button-font-size:		16px;
	--button-font-weight:		bold;
	--button-border-radius:		4px;
	--button-border: 		none;

	--a-color:			rgb(64, 105, 138);
	--a-decoration:			none;
	--a-font-weight:		bold;

	--ul-font-size:			16px;

	--color-black:			rgb(0,0,0);
	--color-darkblue:		rgb(68,83,94);
	--color-midblue:		rgb(64,105,138);
	--color-lightblue:		rgb(87,101,112);
	--color-brightblue:		rgb(100,142,174);
	--color-darkgray:		rgb(125,139,149);
	--color-lightgray:		rgb(152,167,177);
	--color-white:			rgb(255,255,255);
	--color-dark: 			rgb(32,32,32);	
	--color-medium:			rgb(96,96,96);
	--color-light:			rgb(192,192,192);

	--color-error-background:	#f8d7da;
	--color-error-foreground:	#721c24;
	--color-warn-background:	#fff3cd;
	--color-warn-foreground:	#856404;
	--color-info-background:	#e7f3fe;
	--color-info-foreground:	#3178c6;
	--color-success-background:	#e6ffed;
	--color-success-foreground:	#27a745;

	--notification-radius:		5px;
}

@media screen and (prefers-color-scheme: dark) { :root{
	
	--base-inverse:			var(--color-dark);
	--base-text:			var(--color-light);
	--base-color-tint:		var(--color-lightgray);
	--base-color:			var(--color-brightblue);
	--base-background:		var(--color-dark);
	--base-body-color:		var(--color-black);
	--base-shadow: 			0 4px 6px rgba(64, 64, 64, 0.1); /* Subtle shadow */
	--a-color:			var(--color-lightgray);
	--h1-border:			3px solid rgb(64, 64, 64);
}}