/*
Explan 06/10/2023
--------------- blu PM
Base		#3A4AD8	rgb(58,74,216)	--> tertiary (button; )
Dark		#122c4f rgb(18, 44, 79)  ??? nuovo schema colore #2636C4	rgb(38,54,196)	--> primary (side bar; button hover; )
Darker		#1422B0	rgb(20,34,176) 	--> secondary ( button focus; )
--------------- Message
Green		#51BC51	rgb(81,188,81)
Blue		#4C92E4	rgb(76,146,228)
Yellow		#FCE672	rgb(252,230,114)

--------------- black 000000
Base		100% #111111	rgb(17, 17, 17)	
Mid			80%	#333333	rgb(51, 51, 51)	
Light		40%	#999999	rgb(53, 153, 153)
lighter		20% #cccccc	rgb(204, 204, 204)
Lightest	5%	#f2f2f2	rgb(242, 242, 242)

--------------- white FFFFFF
Base		100%	#ffffff	rgb(255, 255, 255)	
Mid			80%	#cccccc	rgb(204, 204, 204)
Light		40%	#666666	rgb(102, 102, 102)
lighter		20%	#333333	rgb(51, 51, 51)
Lightest	10%	#1a1a1a	rgb(26, 26, 26)
*/

@charset "utf-8";

:root {
	
	/******** PGI-2407 4. test base color hsl color model */
	/* 
	How to combine CSS Custom Properties (variables) with the hsl color model to achieve the same thing as SASS
	1. Break colors into three variables: hue, saturation, and lightness 
	2. Combine HSL variables with hsl(360, 100%, 100%) color syntax
	3. Use the CSS calc function to manipulate HSL variables 
		https://codesalad.dev/blog/color-manipulatwith-css-variables-and-hsl-16
	*/
	 --color-h: 240; 	/* Hue        */
  	 --color-s: 100%;	/* Saturation */
  	 --color-l: 50%; 	/* Lightness  */
 	
 	 /* ok 
 	 --base-color: hsl(240, 100%, 50%); 
 	 --base-color: hsl(var(--color-h), 100%, 50%);  
 	 --base-color: hsl(var(--color-h), var(--color-s), var(--color-l));
 	 */
 	 --base-color: hsl(var(--color-h), 100%, 50%);
  	 
  	 --base-color-light:  hsl(var(--color-h), 50%, 75%); /* ok */
  	 --base-color1-light:  hsla(var(--color-h), 50%, 75%, 100%); /* ok */
  	 --base-color1-normal: hsla(var(--color-h), 50%, 50%, 100%); /* ok */
  	 --base-color1-darker: hsla(var(--color-h), 50%, 35%, 100%); /* ok */
  	
  	/******** PGI-2407 END test base color */	
  	
  	
	
	/********** font **********/
	--bs-title-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-title-font-size: 32px;
	--bs-title-font-weight: 600;
	
	--bs-subtitle-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-subtitle-font-size: 24px;
	--bs-subtitle-font-weight: 600;
	
	--bs-title3-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-title3-font-size: 20px;
	--bs-title3-font-weight: 600;
	
	--bs-title4-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-title4-font-size: 16px;
	--bs-title4-font-weight: 600;
	
	--bs-menu-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-menu-font-size: 16px;
	--bs-menu-font-weight: 400;
	
	--bs-body-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-body-font-size: 16px;
	--bs-body-font-weight: 400;
	
	--bs-body-small-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-body-small-font-size: 14px;
	--bs-body-font-weight: 400;
	
	--bs-body-smaller-font-family: Inter, Helvetica Neue, Sans Serif;
	--bs-body-smaller-font-size: 12px;
	--bs-body-font-weight: 400;
	
	
	/********** color **********/
	/* top bar */
	--color-primary: #122c4f;
	--color-primary-rgb: 18,44,79;
	--color-primary-contrast: #ffffff;
	--color-primary-contrast-rgb: 255,255,255;
	--color-primary-shade: #2130ac;
	--color-primary-tint: #3c4aca;

	--color-secondary: #1422B0;
	--color-secondary-rgb: 20,34,176;
	--color-secondary-contrast: #ffffff;
	--color-secondary-contrast-rgb: 255,255,255;
	--color-secondary-shade: #121e9b;
	--color-secondary-tint: #2c38b8;
	
	--color-tertiary: #3A4AD8;
	--color-tertiary-rgb: 58,74,216;
	--color-tertiary-contrast: #ffffff;
	--color-tertiary-contrast-rgb: 255,255,255;
	--color-tertiary-shade: #3341be;
	--color-tertiary-tint: #4e5cdc;
	
	--color-quaternary: #b8c0ca;
	--color-quaternary-rgb: 184, 192, 202;
	--color-quaternary-contrast: #ffffff;
	--color-quaternary-contrast-rgb: 255,255,255;
	/*--color-quaternary-shade: #2a485a;
	--color-quaternary-tint: #456375;*/

	--color-fifth-grade: #238ECC;
	--color-fifth-grade-rgb: 35,142,204;
	--color-fifth-grade-contrast: #ffffff;
	--color-fifth-grade-contrast-rgb: 255,255,255;
	--color-fifth-grade-shade: #1f7db4;
	--color-fifth-grade-tint: #3999d1;
	
	--color-success: #2dd36f;
	--color-success-rgb: 45,211,111;
	--color-success-contrast: #000000;
	--color-success-contrast-rgb: 0,0,0;
	--color-success-shade: #28ba62;
	--color-success-tint: #42d77d;

	--color-warning: #ffc409;
	--color-warning-rgb: 255,196,9;
	--color-warning-contrast: #000000;
	--color-warning-contrast-rgb: 0,0,0;
	--color-warning-shade: #e0ac08;
	--color-warning-tint: #ffca22;

	--color-danger: #eb445a;
	--color-danger-rgb: 235,68,90;
	--color-danger-contrast: #ffffff;
	--color-danger-contrast-rgb: 255,255,255;
	--color-danger-shade: #cf3c4f;
	--color-danger-tint: #ed576b;

	--color-medium: #92949c;
	--color-medium-rgb: 146,148,156;
	--color-medium-contrast: #000000;
	--color-medium-contrast-rgb: 0,0,0;
	--color-medium-shade: #808289;
	--color-medium-tint: #9d9fa6;

 	--color-light: #f4f5f8;
	--color-light-rgb: 244,245,248;
	--color-light-contrast: #000000;
	--color-light-contrast-rgb: 0,0,0;
	--color-light-shade: #d7d8da;
	--color-light-tint: #f5f6f9;	

	/* black */
	--color-black-base: #111111;
	--color-black-base-rgb:	rgb(17, 17, 17);	
	--color-black-mid: #333333;	
	--color-black-mid-rgb: rgb(51, 51, 51);	
	--color-black-light: #999999;	 
	--color-black-light-rgb: rgb(53, 153, 153);  
	--color-black-lighter: #cccccc;
	--color-black-lighter-rgb: rgb(204, 204, 204);
	--color-black-lightest:	#f2f2f2;
	--color-black-lightest-rgb:	rgb(242, 242, 242);

	/* white */
	--color-white-base:	#ffffff;	
	--color-white-base-rgb:	rgb(255, 255, 255);	
	--color-white-mid: #cccccc;
	--color-white-mid-rgb: rgb(204, 204, 204);
	--color-white-light: #666666;
	--color-white-light-rgb: rgb(102, 102, 102);
	--color-white-lighter: #333333;
	--color-white-lighter-rgb: rgb(51, 51, 51);
	--color-white-lightest: #1a1a1a;
	--color-white-lightest-rgb:	rgb(26, 26, 26);
	
	/* color */
 	--color-header: var(--color-quaternary);
	--color-header-rgb: var(--color-quaternary-rgb); 
	
	--color-title: var(--color-black-base);
	--color-title-rgb: var(--color-black-base-rgb); 
	
	--color-subtitle: var(--color-black-base);
	--color-subtitle-rgb: 0, 0, 0;
	
	--color-label: #707070;
	--color-label-rgb: var(--color-black-base-rgb);  
	
	--color-text: #000000; 
	--color-text-rgb: 0, 0, 0;
	
	--color-menu: var(--color-primary-contrast);
	
	--color-container-backgroud: #ffffff;
	--color-backgroud-light: #f7f7f7;
	--color-backgroud-light-rgb: 247,247,247;
	--color-backgroud-highlight: var(--color-secondary);
}