/*
Explan 19/3/2024
--------------- red Orved
Base		#EF300A	rgb(239,48,10)	--> tertiary (button; )
Dark		#D11200	rgb(209,18,0)	--> primary (side bar; button hover; )
Darker		#B30000	rgb(179,0,0)	--> 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 {
	
	/********** 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: #D11200;
	--color-primary-rgb: 209,18,0;
	--color-primary-contrast: #ffffff;
	--color-primary-contrast-rgb: 255,255,255;
	--color-primary-shade: #b81000;
	--color-primary-tint: #d62a1a;

	--color-secondary: #B30000;
	--color-secondary-rgb: 179,0,0;
	--color-secondary-contrast: #ffffff;
	--color-secondary-contrast-rgb: 255,255,255;
	--color-secondary-shade: #9e0000;
	--color-secondary-tint: #bb1a1a;
	
	--color-tertiary: #EF300A;
	--color-tertiary-rgb: 239,48,10;
	--color-tertiary-contrast: #ffffff;
	--color-tertiary-contrast-rgb: 255,255,255;
	--color-tertiary-shade: #d22a09;
	--color-tertiary-tint: #f14523;
	
	--color-quaternary: #b8c0ca;
	--color-quaternary-rgb: 184, 192, 202;
	--color-quaternary-contrast: #ffffff;
	--color-quaternary-contrast-rgb: 255,255,255;


	--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: 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);
}