/** 
 (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 OlivenReiser*/
	--color-shade-green-1: #e7f0eb;
	--color-shade-green-2: #c5d8d2;
	--color-shade-green-3: #b0ccc0;
	--color-shade-green-4: #75aa98;
	
	/** TEXT BODY - (TEXT color: body text) */
	/* --color-text-body: #000006; */
	/* --color-text-body: #21211c; */
	--color-text-body: #2a2526;
	
	/** TEXT HEADING */
	/* --color-text-heading: #000000; */
	/* --color-text-heading: #11110f; */
	--color-text-heading: #231f20;
	
	/** LINK - (link, button, link gradient,button border) */
	/* --color-link: #48ad96; */
	/* --color-link-dark: #398b79; */
	/*   --color-link: #8a9234; */
	/*   --color-link-dark: #737c2a; */
	--color-link: #4e5421;
	--color-link-dark: #3e431a;
	
	
	/** PRICE - (Pricing, some titles, button, button border) */
	/* --color-price: #92160a; */
	/* --color-price-dark: #7a1108; */
	
	--color-price: #48ad9c;
	--color-price-dark: #37887a;
	
	
	/** ALERT - (button, button gradient, button border) */
	--color-alert: #d85052;
	--color-alert-dark: #d04042;
	
	/** WARNING ERROR */
	--color-warning: #d91907;
	--color-warning-dark: #c50f04;
	
	/** RATING */
	--color-rating: #eeb32d;
	--color-rating-dark: #eba424;
	
	/** BASE - (active state) */
	/* --color-base: #4e5421; */
	/* --color-base-dark: #3e431a; */
	--color-base: #f57918;
	--color-base-dark: #f57918;
	
	
	/** DARKGRAY - (Usually same as TEXT BODY) */
	--color-darkgray: #75aa98;
	--color-darkgray-dark: #69a38f;
	
	/** MIDGRAY - (menu, menu gradient) */
	--color-midgray: #b0ccc0;
	--color-midgray-dark: #a4c4b6;
	
	/** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
	/* --color-lightgray: #d9eae4; */
	/* --color-lightgray-dark: #d9eae4; */
	
	/* --color-lightgray: #e7f0eb; */
	/* --color-lightgray-dark: #dbe8e1; */
	--color-lightgray: #eff3f0;
	--color-lightgray-dark: #eaefeb;
	
	/** 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: #48ad96; */
	/* --color-accent-dark: #398b79; */
	/* --color-accent: #fc684c; */
	/* --color-accent-dark: #fc5839; */
	--color-accent: #48ad9c;
	--color-accent-dark: #37887a;
	
	/** COMPLEMENTARY 1 - (button, button gradient, button border) */
	--color-1: #d16759;
	--color-1-dark: #cd594a;
	
	/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-2: #1a85c9;
	--color-2-dark: #156dbe;
	
	--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: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-body: 400;
		
		--font-family-body-bold: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-body-bold: 600;
		--text-transform-body-bold: none;
		--font-style-body-bold: normal;
		
		--font-family-body-italic: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-body-italic: 400;
		--text-transform-body-italic: none;
		--font-style-body-italic: oblique;
		
		/** FONT HEADING */
		--font-family-heading: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-heading: 700;
		/* --text-transform-heading: uppercase; */
		--text-transform-heading: none;
		--font-style-heading: normal;
		
		/** FONT HEADING - bold */
		--font-family-heading-bold: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-heading-bold: 800;
		/* --text-transform-heading-bold: uppercase; */
		--text-transform-heading-bold: none;
		--font-style-heading-bold: normal;
		
		/** FONT PREAMBLE */
		--font-family-preamble: 'Raleway','Lucida Grande',Helvetica,sans-serif;
		--font-weight-preamble: 300;
		--text-transform-preamble: none;
		--font-style-preamble: normal;
		
		/** FONT QUOTATION */
		--font-family-quotation: 'Raleway','Lucida Grande',Helvetica,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.875em; */
		--font-size-h1: 3.667em;
		--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; */
		--font-size-h2: 2.55em;
		--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; */
		--font-size-h3: 1.913em;
		--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.6em;
		--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: 0;
		
		/** MISC IMAGE */
		--border-radius-image: 0;
		
		/** MISC BUTTON */
		/* --border-radius-button: 3px; */
		--border-radius-button: 0.187em;
	
	/** = END === misc KEY === */ 
}