/* General */
:root {
	--border-radius: 4px;
	--border-radius2x: 8px;
	--default: #777;
	--main-font: "Poppins", Arial, sans-serif;
	--header-font: 'Open Sans', sans-serif;



}
/* Skin Colors */
:root {

	/* Input Variables for Base Colors (HSL) */
	/* --primary: #0088CC;	*/
	--primary-hue: 102;
	--primary-saturation: 30%;
	--primary-lightness: 35%;
	--primary-rgb: 74, 110, 62;

	/* --secondary: #e36159; */
	--secondary-hue: 30;
	--secondary-saturation: 50%;
	--secondary-lightness: 40%;
	--secondary-rgb: 139, 90, 43;

	/* --tertiary: #2BAAB1; */
	--tertiary-hue: 180;
	--tertiary-saturation: 100%;
	--tertiary-lightness: 24%;
	--tertiary-rgb: 0, 125, 122;

	/* --quaternary: #383f48; */
	--quaternary-hue: 0;
	--quaternary-saturation: 0%;
	--quaternary-lightness: 66%;
	--quaternary-rgb: 169, 169, 169;

	/* --light: #FFF; */
	--light-hue: 0;
	--light-saturation: 0%;
	--light-lightness: 83%;
	--light-rgb: 211, 211, 211;

	/* --dark: #212529; */
	--dark-hue: 180;
	--dark-saturation: 25%;
	--dark-lightness: 30%;
	--dark-rgb: 47, 79, 79;

	/* Calculated Lightness Adjustments */
	--lightness-100: -10%;
	--lightness-200: -15%;
	--lightness-300: -20%;
	
	--lightness--100: +10%;
	--lightness--200: +15%;
	--lightness--300: +20%;


	/* Primary Color Variations */
	--primary: hsl(var(--primary-hue), var(--primary-saturation), var(--primary-lightness));
	
	/* Primary Transparency Variations */
	--primary-rgba-0: rgba(var(--primary-rgb), 0);
	--primary-rgba-10: rgba(var(--primary-rgb), 0.1);
	--primary-rgba-20: rgba(var(--primary-rgb), 0.2);
	--primary-rgba-30: rgba(var(--primary-rgb), 0.3);
	--primary-rgba-40: rgba(var(--primary-rgb), 0.4);
	--primary-rgba-50: rgba(var(--primary-rgb), 0.5);
	--primary-rgba-60: rgba(var(--primary-rgb), 0.6);
	--primary-rgba-70: rgba(var(--primary-rgb), 0.7);
	--primary-rgba-80: rgba(var(--primary-rgb), 0.8);
	--primary-rgba-90: rgba(var(--primary-rgb), 0.9);

	/* Primary Shade Variations */
	--primary-100: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness-100)));
	--primary-200: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness-200)));
	--primary-300: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness-300)));
	
	--primary--100: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness--100)));
	--primary--200: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness--200)));
	--primary--300: hsl(var(--primary-hue), var(--primary-saturation), calc(var(--primary-lightness) + var(--lightness--300)));
  

	/* Secondary Color Variations */
	--secondary: hsl(var(--secondary-hue), var(--secondary-saturation), var(--secondary-lightness));
	
	/* Secondary Transparency Variations */
	--secondary-rgba-0: rgba(var(--secondary-rgb), 0);
	--secondary-rgba-10: rgba(var(--secondary-rgb), 0.1);
	--secondary-rgba-20: rgba(var(--secondary-rgb), 0.2);
	--secondary-rgba-30: rgba(var(--secondary-rgb), 0.3);
	--secondary-rgba-40: rgba(var(--secondary-rgb), 0.4);
	--secondary-rgba-50: rgba(var(--secondary-rgb), 0.5);
	--secondary-rgba-60: rgba(var(--secondary-rgb), 0.6);
	--secondary-rgba-70: rgba(var(--secondary-rgb), 0.7);
	--secondary-rgba-80: rgba(var(--secondary-rgb), 0.8);
	--secondary-rgba-90: rgba(var(--secondary-rgb), 0.9);

	/* Secondary Shade Variations */
	--secondary-100: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness-100)));
	--secondary-200: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness-200)));
	--secondary-300: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness-300)));
	
	--secondary--100: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness--100)));
	--secondary--200: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness--200)));
	--secondary--300: hsl(var(--secondary-hue), var(--secondary-saturation), calc(var(--secondary-lightness) + var(--lightness--300)));  

	/* Tertiary Color Variations */
	--tertiary: hsl(var(--tertiary-hue), var(--tertiary-saturation), var(--tertiary-lightness));
	
	/* Tertiary Transparency Variations */
	--tertiary-rgba-0: rgba(var(--tertiary-rgb), 0);
	--tertiary-rgba-10: rgba(var(--tertiary-rgb), 0.1);
	--tertiary-rgba-20: rgba(var(--tertiary-rgb), 0.2);
	--tertiary-rgba-30: rgba(var(--tertiary-rgb), 0.3);
	--tertiary-rgba-40: rgba(var(--tertiary-rgb), 0.4);
	--tertiary-rgba-50: rgba(var(--tertiary-rgb), 0.5);
	--tertiary-rgba-60: rgba(var(--tertiary-rgb), 0.6);
	--tertiary-rgba-70: rgba(var(--tertiary-rgb), 0.7);
	--tertiary-rgba-80: rgba(var(--tertiary-rgb), 0.8);
	--tertiary-rgba-90: rgba(var(--tertiary-rgb), 0.9);

	/* Tertiary Shade Variations */
	--tertiary-100: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness-100)));
	--tertiary-200: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness-200)));
	--tertiary-300: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness-300)));
	
	--tertiary--100: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness--100)));
	--tertiary--200: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness--200)));
	--tertiary--300: hsl(var(--tertiary-hue), var(--tertiary-saturation), calc(var(--tertiary-lightness) + var(--lightness--300)));	


	/* Quaternary Color Variations */
	--quaternary: hsl(var(--quaternary-hue), var(--quaternary-saturation), var(--quaternary-lightness));
	
	/* Quaternary Transparency Variations */
	--quaternary-rgba-0: rgba(var(--quaternary-rgb), 0);
	--quaternary-rgba-10: rgba(var(--quaternary-rgb), 0.1);
	--quaternary-rgba-20: rgba(var(--quaternary-rgb), 0.2);
	--quaternary-rgba-30: rgba(var(--quaternary-rgb), 0.3);
	--quaternary-rgba-40: rgba(var(--quaternary-rgb), 0.4);
	--quaternary-rgba-50: rgba(var(--quaternary-rgb), 0.5);
	--quaternary-rgba-60: rgba(var(--quaternary-rgb), 0.6);
	--quaternary-rgba-70: rgba(var(--quaternary-rgb), 0.7);
	--quaternary-rgba-80: rgba(var(--quaternary-rgb), 0.8);
	--quaternary-rgba-90: rgba(var(--quaternary-rgb), 0.9);

	/* Quaternary Shade Variations */
	--quaternary-100: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness-100)));
	--quaternary-200: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness-200)));
	--quaternary-300: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness-300)));
	
	--quaternary--100: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness--100)));
	--quaternary--200: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness--200)));
	--quaternary--300: hsl(var(--quaternary-hue), var(--quaternary-saturation), calc(var(--quaternary-lightness) + var(--lightness--300)));

	/* dark Color Variations */
	--dark: hsl(var(--dark-hue), var(--dark-saturation), var(--dark-lightness));
	
	/* dark Transparency Variations */
	--dark-rgba-0: rgba(var(--dark-rgb), 0);
	--dark-rgba-10: rgba(var(--dark-rgb), 0.1);
	--dark-rgba-20: rgba(var(--dark-rgb), 0.2);
	--dark-rgba-30: rgba(var(--dark-rgb), 0.3);
	--dark-rgba-40: rgba(var(--dark-rgb), 0.4);
	--dark-rgba-50: rgba(var(--dark-rgb), 0.5);
	--dark-rgba-60: rgba(var(--dark-rgb), 0.6);
	--dark-rgba-70: rgba(var(--dark-rgb), 0.7);
	--dark-rgba-80: rgba(var(--dark-rgb), 0.8);
	--dark-rgba-90: rgba(var(--dark-rgb), 0.9);

	/* dark Shade Variations */
	--dark-100: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness-100)));
	--dark-200: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness-200)));
	--dark-300: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness-300)));
	
	--dark--100: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness--100)));
	--dark--200: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness--200)));
	--dark--300: hsl(var(--dark-hue), var(--dark-saturation), calc(var(--dark-lightness) + var(--lightness--300)));
	
	/* light Color Variations */
	--light: hsl(var(--light-hue), var(--light-saturation), var(--light-lightness));
	
	/* light Transparency Variations */
	--light-rgba-0: rgba(var(--light-rgb), 0);
	--light-rgba-10: rgba(var(--light-rgb), 0.1);
	--light-rgba-20: rgba(var(--light-rgb), 0.2);
	--light-rgba-30: rgba(var(--light-rgb), 0.3);
	--light-rgba-40: rgba(var(--light-rgb), 0.4);
	--light-rgba-50: rgba(var(--light-rgb), 0.5);
	--light-rgba-60: rgba(var(--light-rgb), 0.6);
	--light-rgba-70: rgba(var(--light-rgb), 0.7);
	--light-rgba-80: rgba(var(--light-rgb), 0.8);
	--light-rgba-90: rgba(var(--light-rgb), 0.9);

	/* light Shade Variations */
	--light-100: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness-100)));
	--light-200: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness-200)));
	--light-300: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness-300)));
	
	--light--100: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness--100)));
	--light--200: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness--200)));
	--light--300: hsl(var(--light-hue), var(--light-saturation), calc(var(--light-lightness) + var(--lightness--300)));	
}
/* Skin Colors - Inverse */
:root {
	--primary-inverse: #FFF;
	--secondary-inverse: #FFF;
	--tertiary-inverse: #FFF;
	--quaternary-inverse: #FFF;
	--dark-inverse: #FFF;
	--light-inverse: #777;
}
/* Grey Colors */
:root {
	--grey: #969696;
	--grey-100: #f4f4f4;
	--grey-200: #eaeaea;
	--grey-300: #e5e5e5;
	--grey-400: #e0e0e0;
	--grey-500: #dbdbdb;
	--grey-600: #cecece;
	--grey-700: #c1c1c1;
	--grey-800: #a8a8a8;
	--grey-900: #8e8e8e;
	--grey-1000: #757575;
}