/** 
 (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:#46423f;
	
		/** TEXT HEADING */
	--color-text-heading:#2c2927;
	
		/** LINK - (link, button, link gradient,button border) */
		--color-link:		#04406b;
		--color-link-dark:	#033356;
	
		/** PRICE - (Pricing, some titles, button, button border) */
	--color-price:#f7441e;
	--color-price-dark:#f22812;
	
		/** ALERT - (button, button gradient, button border) */
	--color-alert:#dc1919;
	--color-alert-dark:#ca0f0f;
	
		/** WARNING ERROR */
	--color-warning:#b22222;
	--color-warning-dark:#8B0000;

		/** RATING */
	--color-rating:#ffc200;
	--color-rating-dark:#e69c00;

		/** BASE - (active state) */
	--color-base:#203457;
	--color-base-dark:#1a2c4a;
	
		/** DARKGRAY - (Usually same as TEXT BODY) */
	--color-darkgray:#46423f;
	--color-darkgray-dark:#302d2b;
	
		/** MIDGRAY - (menu, menu gradient) */
	--color-midgray:#9d9994;
	--color-midgray-dark:#89857f;
	
		/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
	--color-lightgray:#f5f5f5;
	--color-lightgray-dark:#ebebeb;

		/** 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:#203457;
	--color-accent-dark:#1a2c4a;
	
		/** COMPLEMENTARY 1 - (button, button gradient, button border) */
	--color-1:#000000;
	--color-1-dark:#f6aa16;
	
		/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-2:#203457;
	--color-2-dark:#203457;

	/** Complementary 3*/
	--color-3: #4467a5;

		/** SLOGAN - (button, button gradient, button border) */
		--color-text-slogan: 				#4467a5;
		--color-background-slogan:			#b8def9;
		--color-background-slogan-dark:		#aad7f8;


		/** SEARCH ENGINE - (button, button gradient, button border) */
		--color-text-search-engine: 				#033356;
		/* --color-background-search-engine:			#2ea8ff; */
		--color-background-search-engine:			#f3edee;
		--color-background-search-engine-dark:		#2597ff;



		--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:400;
	--text-transform-body:none;
	--font-style-body:normal;

	--font-family-body-bold:'Open Sans',sans-serif;
	--font-weight-body-bold:600;
	--text-transform-body-bold:none;
	--font-style-body-bold:normal;
	
	--font-family-body-italic:'Open Sans',sans-serif;
	--font-weight-body-italic:400;
	--text-transform-body-italic:none;
	--font-style-body-italic:oblique;

  /** FONT HEADING */
	--font-family-heading:'Open Sans',sans-serif;
	--font-weight-heading:600;
	--text-transform-heading:uppercase;
	--text-transform-heading:none;
	--font-style-heading:normal;
	
	/** FONT PREAMBLE */
	--font-family-preamble:'Open Sans',sans-serif;
	--font-weight-preamble:300;
	--text-transform-preamble:none;
	--font-style-preamble:normal;

  /** FONT QUOTATION */
	--font-family-quotation:'Open Sans',sans-serif;
	--font-weight-quotation:300;
	--text-transform-quotation:none;
  --font-style-quotation:italic;
  --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;
	--font-style-button:normal;
	--letter-spacing-button:0;
	--font-size-button: 1em;
	--line-height-button: 1.5;
	--letter-spacing-button:0;
	--margin-button:0;
	--padding-button:0.563em 0.813em;
	/**/

 /** = END === font KEY === */

 /** = START === type KEY === */

  /** TYPE BODY */
	--font-size-body:1.6rem;
	--line-height-body:1.5;
	--letter-spacing-body:0;

  /** TYPE H1 */
	--font-family-h1:var(--font-family-heading);
	--font-weight-h1:var(--font-weight-heading);
	--text-transform-h1:var(--text-transform-heading);
	--font-style-h1:normal;
	--font-size-h1:2.875em;
	--line-height-h1:1.2;
	--letter-spacing-h1:0;
	--margin-top-h1:0;
	--padding-top-h1:0;
	--padding-bottom-h1:0.55em;
	--margin-bottom-h1:0;

  /** TYPE H2 */
	--font-family-h2:var(--font-family-heading);
	--font-weight-h2:var(--font-weight-heading);
	--text-transform-h2:var(--text-transform-heading);
	--font-style-h2:normal;
	--font-size-h2:2em;
	--line-height-h2:1.25;
	--letter-spacing-h2:0;
	--margin-top-h2:0;
	--padding-top-h2:0;
	--padding-bottom-h2:0.375em;
	--margin-bottom-h2:0;

  /** TYPE H3 */
	--font-family-h3:var(--font-family-heading);
	--font-weight-h3:var(--font-weight-heading);
	--text-transform-h3:var(--text-transform-heading);
	--font-style-h3:normal;
	--font-size-h3:1.5em;
	--line-height-h3:1.334;
	--letter-spacing-h3:0;
	--margin-top-h3:0;
	--padding-top-h3:0;
	--padding-bottom-h3:0.25em;
	--margin-bottom-h3:0;

  /** TYPE BOX-TITLE */
	--font-family-box-title:var(--font-family-heading);
	--font-weight-box-title:var(--font-weight-heading);
	--text-transform-box-title:var(--text-transform-heading);
	--font-style-box-title:normal;
	--font-size-box-title:1.5em;
	--line-height-box-title:1.334;
	--letter-spacing-box-title:0;
	--margin-top-box-title:0;
	--padding-top-box-title:0;
	/* --padding-bottom-box-title:0.25em; */
	--padding-bottom-box-title:0.65em;
	--margin-bottom-box-title:0;

 /** = END === type KEY === */ 

 /** = START === misc KEY === */

  /** MISC BOX */
  --border-radius-box: 4px;

  /** MISC IMAGE */
  --border-radius-image: 5px;

  /** MISC BUTTON */
	--border-radius-button:0.215em;

	/** MISC INPUT */	
	--border-radius-input:2px;

 /** = END === misc KEY === */ 
 
}