/** 
 (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: #1c1c1c;
	

	/** LINK - (link, button, link gradient,button border) */
	/* --color-link:		#b4975a; */
	/* --color-link-dark:	#9e854e; */
	--color-link:		#000080;
	--color-link-dark:	#00006c;

	/** PRICE - (Pricing, some titles, button, button border) */
	--color-price:		#2F5597;
	--color-price-dark:	#2F5597;

	/** ALERT - (button, button gradient, button border) */
	--color-alert:		#fe2c38;
	--color-alert-dark:	#fd141b;

	/** WARNING ERROR */
	--color-warning:		#a7000a;
	--color-warning-dark:	#950008;

	/** RATING */
	--color-rating:			#fec72c;
	--color-rating-dark:	#febc23;

	/** BASE - (active state) */
	/* --color-base:		#b4975a; */
	/* --color-base-dark:	#b4975a; */
	
	--color-base:		#2F5597;
	--color-base-dark:	#2F5597;
	
	
	/** DARKGRAY - (Usually same as TEXT BODY) */
	--color-darkgray:		#4c4c4c;
	--color-darkgray-dark:	#3d3d3d;

	/** MIDGRAY - (menu, menu gradient) */
	--color-midgray:		#cccccc;
	--color-midgray-dark:	#b6b6b6;

	/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
	--color-lightgray:		#fafafa;
	--color-lightgray-dark:	#f2f2f2;
	/* --color-lightgray-dark:	#f2f2f2; */
	


	/** 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:			#b4975a; */
	/* --color-accent-dark:	#9e854e; */
	--color-accent:			#2F5597;
	--color-accent-dark:	#2a4d88;

	/** COMPLEMENTARY 1 - (button, button gradient, button border) */
	--color-1:		#fdecd9;
	--color-1-dark:	#fad9b2;

	/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-2:		#fec72c;
	--color-2-dark:	#febc23;
	
	/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-3:		#ffffff;
	--color-3-dark:	#ffffff;
	
	
	/** MISCELLANEOUS */
	--color-error:var(--color-warning);
	/* --color-success: #00ff00; */
	
	--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;
	
	--font-family-body-bold: 'Open Sans',sans-serif;
	--font-weight-body-bold: 700;
	--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: 'Merriweather',serif; */
	--font-family-heading: 'Open Sans',sans-serif;
	--font-weight-heading: 300;
	/* --text-transform-heading: uppercase; */
	--text-transform-heading: none;
	--font-style-heading: normal;
	
	/** FONT PREAMBLE */
	--font-family-preamble: 'Open Sans',sans-serif;
	--font-weight-preamble: 400;
	--text-transform-preamble: none;
	--font-style-preamble: normal;
	
	/** FONT QUOTATION */
	/* --font-family-quotation: 'Merriweather',serif; */
	--font-family-quotation: 'Open Sans',sans-serif;
	--font-weight-quotation: 300;
	--text-transform-quotation: none;
	--font-style-quotation: italic;
	
	
	/** 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);
	--font-weight-button: var(--font-weight-body);
	/* --text-transform-button: uppercase; */
	--text-transform-button: none;
	--font-style-button: normal;

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

}