/*
Explan 06/10/2023

ServiceHUB PM blue

Base #3d4ad0 61,74,208  --> tertiary
	11/04/2025 su richiesta Diego Nesploi diventa #8d2020 rgb(141, 32, 32)
Dark #2936bd 41,54,189   --> primary
Darker #1721a9 23,33,169  --> secondary

*/

@charset "utf-8";

:root {
	
	
	/******** PGI-2407 test base color */

	
	
	
	/* 
	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-manipulation-with-css-variables-and-hsl-16
	*/
	--color-h: 240; /* Hue        */
  	--color-s: 100%; /* Saturation */
  	--color-l: 50%; /* Lightness  */
  
  
  
  
  
  
  	--base-color: hsl(240, 100%, 50%);  /* !!! blue ok !!!*/
  	/* KO!!!!!
  	--color1-light:  hsla(var(--base-color), 50%, 75%, 100%);
  	--color1-normal: hsla(var(--base-color), 50%, 50%, 100%);
  	--color1-darker: hsla(var(--base-color), 50%, 35%, 100%);
  	
  	
  	--palette-blue-10: hsla(var(--base-color), 10%, 100%);
  	*/
  	
  	/******** 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 **********/
	/* side bar, top bar, button hover */
	--color-primary: #8d2020;
	--color-primary-rgb: 141, 32, 32;
	--color-primary-contrast: #e1e1e5; /*#bfc3e9;*/ /* grigio voci menu */
	--color-primary-contrast-rgb: 191,195,233;
	--color-primary-shade: #8d2020;
	--color-primary-tint: #8d2020;

	--color-secondary: #1721a9;
	--color-secondary-rgb: 23,33,169;
	--color-secondary-contrast: #ffffff;
	--color-secondary-contrast-rgb: 255,255,255;
	--color-secondary-shade: #141d95;
	--color-secondary-tint: #2e37b2;
	/* button */
	--color-tertiary: #3d4ad0;
	--color-tertiary-rgb: 61,74,208;
	--color-tertiary-contrast: #ffffff;
	--color-tertiary-contrast-rgb: 255,255,255;
	--color-tertiary-shade: #3641b7;
	--color-tertiary-tint: #505cd5;
	
	--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: #000000;
	--color-title-rgb: 0, 0, 0; 
	
	--color-subtitle: #000000;
	--color-subtitle-rgb: 0, 0, 0;
	
	--color-label: #707070;
	--color-label-rgb: 112,112,112;  
	
	--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);
}