/** 
 (useCssVariablesGlobalRootReplace = true) 
 *
 *	ALERT! 
 *		Only global variables may be declared and must be placed inside the :root section! 
 *		Other native CSS Variable / CSS Custom Properties functionality like 
 *		    the possibility of changing the variables locally (local scope), 
 *		    declaring variables inline, 
 *		    var() fallbacks etc 
 *		will not work with this set up!
 *		The variables will be extracted and be physically replaced where they are use in the css 
 *		so that older browsers that do not support CSS Variables will see the same result when the 
 *		CSS file is generated on the live site.
 *
 */

body.debug{
	/* visibility: visible; */
}

:root{
	/** = START === COLOR KEY === */

		/** TEXT BODY - (TEXT color:body text) */
		--color-text-body: #282e3d;
	
		/** TEXT HEADING */
		--color-text-heading: #171b26;
		
		/** TEXT HEADING - 1 */
		--color-text-heading-1: #407589;

		/** LINK - (link, button, link gradient,button border) */
		--color-link:		#197dd0;
		--color-link-dark:	#1464c7;
	
		/** PRICE - (Pricing, some titles, button, button border) */
		--color-price:		#765101;
		--color-price-dark:	#5e4101;
	
		/** ALERT - (button, button gradient, button border) */
		--color-alert:		#f33300;
		--color-alert-dark:	#dc3104;

		/** WARNING ERROR */
		--color-warning:		#b00f06;
		--color-warning-dark:	#a00c05;

		/** RATING */
		--color-rating:			#dd9b00;
		--color-rating-dark:	#d68700;

		/** BASE - (active state) */
		--color-base:		#193977;
		--color-base-dark:	#142e5f;
		
	
		/** DARKGRAY - (Usually same as TEXT BODY) */
		--color-darkgray:		#2f2f2f;
		--color-darkgray-dark:	#262626;
	
		/** MIDGRAY - (menu, menu gradient) */
		--color-midgray:		#575757;
		--color-midgray-dark:	#464646;
	
		/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
		 --color-lightgray:		 #e9e8e3;
		 --color-lightgray-dark: #dad6ce;


		/** PRIMARY BACKGROUND - dark text on light background or light text on dark background ('Dark Mode') */
		--color-background-text: #fff;
		/* --color-background-text: #000; */
	
		/** ACCENT - (CTA 'Call to action': button, button border, gradient) */
		--color-accent:			#5facec;
		--color-accent-dark:	#4c9be8;
	
		/** COMPLEMENTARY 1 - (button, button gradient, button border) */
		--color-1:		#f33300;
		--color-1-dark:	#dc3104;
	
		/** COMPLEMENTARY 2 - (button, button gradient, button border) */
		--color-2:		#af2c24;
		--color-2-dark:	#9f231d;

		/** COMPLEMENTARY 3 */
		--color-3:		#1a49a5;
		--color-3-dark:	#152f63;




		/** LIGHTSHADE 1 */
		--color-lightshade-1:		#ffffff;
		--color-lightshade-1-dark:	#f0f1f3;

		

		--color-print-text-body:		var(--color-text-body);
		--color-print-text-heading:		var(--color-text-heading);
		--color-print-link:				var(--color-link);
		--color-print-rating:			var(--color-rating);
		--color-print-lightgray:		var(--color-lightgray);
		--color-print-lightgray-dark:	var(--color-lightgray-dark);


	/** = END === color KEY === */

	/** = START === font KEY === */

		/** FONT BODY - (TEXT color:body text) */
		/* --font-family-body: 'Open Sans',sans-serif; */
		/* --font-weight-body: 300; */
		/* --font-weight-body: 400; */	
		/* --font-family-body-bold: 'Open Sans',sans-serif; */
		/* --font-weight-body-bold: 600; */
		--font-family-body: 'PT Sans',sans-serif;
		--font-weight-body: 400;
		--font-family-body-bold: 'PT Sans',sans-serif;
		--font-weight-body-bold: 700;


		/** FONT HEADING */
		/* --font-family-heading: 'PT Sans Narrow',sans-serif; */
		/* --font-weight-heading: 700; */				
		--font-family-heading: 'Dosis',sans-serif;
		--font-weight-heading: 500;
		/* --font-weight-heading: 600; */
		/* --font-weight-heading: 700; */
		--text-transform-heading: uppercase;
		/* --text-transform-heading: none; */


		/** FONT HEADING 1 */
		/* --font-family-heading-1: 'PT Sans Narrow',sans-serif; */
		/* --font-weight-heading-1: 700; */
		--font-family-heading-1: 'Dosis',sans-serif;
		/* --font-weight-heading-1: 500; */
		/* --font-weight-heading-1: 600; */
		--font-weight-heading-1: 700;
		--text-transform-heading-1: uppercase;
		/* --text-transform-heading-1: none; */


		/** FONT QUOTATION */
		--font-family-quotation:cursive;
		--font-weight-quotation: 400;
		/* --font-style-quotation:italic; */
		--font-style-quotation:normal;
		--text-transform-quotation: none;

		/** FONT BUTTON */
		/* --font-family-button: var(--font-family-heading); */
		/* --font-weight-button: var(--font-weight-heading); */
		/* --text-transform-button: var(--text-transform-heading); */
		--font-family-button: var(--font-family-body-bold);
		--font-weight-button: var(--font-weight-body-bold);
/* 		--text-transform-button: uppercase; */
		--text-transform-button: none;
	/** = END === font KEY === */	

}