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

	/** LOGO PRIMARY */
	--color-logo-primary: #0089d0;
	--color-logo-primary-dark: #066db3;
	--color-logo-primary-darker: #012f65;
	
	/** LOGO SECONDARY */
	--color-logo-secondary: #e22c2b;
	--color-logo-secondary-dark: #ca1111;
	--color-logo-secondary-darker: #b80f0f;
	

	/**/
	
	/** TEXT BODY - (TEXT color: body text) */
	--color-text-body: #3e4043;
	
	/** TEXT HEADING */
	--color-text-heading: #26282a;
	
	/** LINK - (link, button, link gradient,button border) */
	--color-link: #0e00a0;
	--color-link-dark: #050054;
	
	/** PRICE - (Pricing, some titles, button, button border) */
	--color-price: #c21c79;
	--color-price-dark: #a7124e;
	
	/** ALERT - (button, button gradient, button border) */
	--color-alert: #a01e12;
	--color-alert-dark: #8d180e;
	
	/** WARNING ERROR */
	--color-warning: #b22222;
	--color-warning-dark: #8B0000;
	
	/** RATING */
	--color-rating: #eed01f;
	--color-rating-dark: #ebc719;
	
	/** BASE - (active state) */
	/* --color-base: #024693; */
	/* --color-base-dark: #003575; */
	/* --color-base-darker: #012f65; */
	/* --color-base: var(--color-logo-primary); */
	/* --color-base-dark: var(--color-logo-primary-dark); */
	/* --color-base-darker: var(--color-logo-primary-darker); */
	--color-base: var(--color-logo-secondary);
	--color-base-dark: var(--color-logo-secondary-dark);
	--color-base-darker: var(--color-logo-secondary-darker);

	/** DARKGRAY */
	--color-darkgray: #3e4043;
	--color-darkgray-dark: #323336;
	
	/** MIDGRAY - (menu, menu gradient) */
	--color-midgray: #969798;
	--color-midgray-dark: #818283;
	
	/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
	--color-lightgray: #eeeeee;
	--color-lightgray-dark: #e4e4e4;
	
	/** 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: #e22c2b; */
	/* --color-accent-dark: #ca1111; */
	--color-accent: var(--color-logo-primary);
	--color-accent-dark: var(--color-logo-primary-dark);
	
	/** COMPLEMENTARY 1 - (button, button gradient, button border) */
	/* --color-1: #eed01f; */
	/* --color-1-dark: #ebc719; */
	--color-1: var(--color-logo-secondary);
	--color-1-dark: var(--color-logo-secondary-dark);
	
	/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-2: #119d85;
	--color-2-dark: #0e896d;

	/** CKEDITOR */
	--color-ckeditor-1:#e22c2b; /** Red */
	--color-ckeditor-2:#024693; /** Blue */
	--color-ckeditor-3:#ebc719; /** Yellow */

	/** 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 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: 'Open 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: 'Open 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-bold);
	--font-weight-button: var(--font-weight-body-bold);
	/* --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.5em;
	--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: 1.75em;
	--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.25em;
	--line-height-h3: 1.4;
	--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.25em;
	--line-height-box-title: 1.4;
	--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: 2px;
	
	/** MISC IMAGE */
	--border-radius-image: 1px;
	
	/** MISC BUTTON */
	--border-radius-button: 0.215em;

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

}