/** 
 (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 === */



		/** CUSTOM ANSREJSR LOGO - PURPLE */
		--color-logo-purple: 		#602976;
		--color-logo-purple-dark:	#602976;
			/* --color-logo-purple: 		#46156b;
		--color-logo-purple-dark:	#381156; */

		/** CUSTOM ANSREJSR LOGO - YELLOW */
		--color-logo-yellow: 		#d5c200;
		--color-logo-yellow-dark:	#bcab00;

		/******************/


		/** TEXT BODY - (TEXT color:body text) */
		--color-text-body: #3c3740;
	
		/** TEXT HEADING */
		--color-text-heading: #252128;
	
		/** LINK - (link, button, link gradient,button border) */
		--color-link:		#770b6e;
		--color-link-dark:	#5f0958;
	
		/** PRICE - (Pricing, some titles, button, button border) */
		--color-price:		#602976;
		--color-price-dark:	#602976;
			/* --color-price-dark:	#3a035e; */
	
		/** ALERT - (button, button gradient, button border) */
		--color-alert:		#c6175f;
		--color-alert-dark:	#bb124c;
	
		/** WARNING ERROR */
		--color-warning:		#b1182e;
		--color-warning-dark:	#a11325;

		/** RATING: YELLOW */
		--color-rating:			var(--color-logo-yellow);
		--color-rating-dark:	var(--color-logo-yellow-dark);

	
		/** BASE: YELLOW - (active state) */
		--color-base:		var(--color-logo-yellow);
		--color-base-dark:	var(--color-logo-yellow-dark);
	
		/** DARKGRAY - (Usually same as TEXT BODY) */
		/* --color-darkgray:		#3c3740; */
		--color-darkgray:		var(--color-text-body);
		--color-darkgray-dark:	#302c33;
	
		/** MIDGRAY - (menu, menu gradient) */
		--color-midgray:		#958e9b;
		--color-midgray-dark:	#807787;
	
		/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
		--color-lightgray:		#f5f3f5;
		--color-lightgray-dark:	#e9e5e9;
	
		/** ACCENT - PURPLE - (CTA 'Call to action': button, button border, gradient) */
		--color-accent:			var(--color-logo-purple);
		--color-accent-dark:	var(--color-logo-purple-dark);
	
		/** COMPLEMENTARY: BROWN - (button, button gradient, button border) */
		--color-1:		#6b4615;
		--color-1-dark:	#563811;
	
		/** COMPLEMENTARY: GREEN - (button, button gradient, button border) */
		--color-2:		#156b46;
		--color-2-dark:	#115638;

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

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

		/** FONT BODY - (TEXT color:body text) */
		--font-family-body: 'Roboto',sans-serif;
		--font-weight-body: 300;

		--font-family-body-bold: 'Roboto',sans-serif;
		--font-weight-body-bold: 400;

	
		/** FONT HEADING */
		--font-family-heading: 'Roboto',sans-serif;
		--font-weight-heading: 700;
		--text-transform-heading: uppercase;
	/** = END === font KEY === */	

	
}