/** 
 (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: #139ad4; */
	/* --color-link-dark: #0f86cb; */
	
	--color-link: #262927;
	--color-link-dark: #101110;
	
	/** 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: #f78f1e; */
	/* --color-base-dark: #f57918; */
	
	--color-base: #93b321;
	--color-base-dark: #748d1a;
	
	/** 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: #1d8faf; */
	/* --color-accent-dark: #17799f; */
	
	--color-accent: #2b583f;
	--color-accent-dark: #101110;
	
	/** COMPLEMENTARY 1 - (button, button gradient, button border) */
	--color-1: #f9c624;
	--color-1-dark: #f6aa16;
	
	/** COMPLEMENTARY 2 - (button, button gradient, button border) */
	--color-2: #55c87f;
	--color-2-dark: #33ac4c;
	
	/** COMPLEMENTARY 3 - (button, button gradient, button border) */
	--color-3: #2b583f; /*#777c7f 2024-09-12 AN*/
	--color-3-dark: #6e7275;
	--color-3-light: #818689;
	
	
	/**/
	--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: 'El Messiri',Cambria,'Hoefler Text',serif;
	--font-weight-body: 400;
	
	/* --font-family-body-bold: 'Open Sans',sans-serif; */
	/* --font-weight-body-bold: 700; */
	--font-family-body-bold: 'El Messiri',Cambria,'Hoefler Text',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; */
	--font-family-body-italic: 'El Messiri',Cambria,'Hoefler Text',serif;
	--font-weight-body-italic: 400;
	--text-transform-body-italic: none;
	--font-style-body-italic: oblique;
	
	/** FONT HEADING */
	/* --font-family-heading: 'Merriweather',serif; */
	/* --font-weight-heading: 300; */
	--font-family-heading: 'El Messiri',Cambria,'Hoefler Text',serif;
	--font-weight-heading: 400;
	/* --text-transform-heading: uppercase; */
	--text-transform-heading: none;
	--font-style-heading: normal;
	
	/** FONT PREAMBLE */
	/* --font-family-preamble: 'Open Sans',sans-serif; */
	/* --font-weight-preamble: 700; */
	--font-family-preamble: 'El Messiri',Cambria,'Hoefler Text',serif;
	--font-weight-preamble: 700;
	--text-transform-preamble: none;
	--font-style-preamble: normal;
	
	/** FONT QUOTATION */
	/* --font-family-quotation: 'Merriweather',serif; */
	/* --font-weight-quotation: 300; */
	--font-family-quotation: 'El Messiri',Cambria,'Hoefler Text',serif;
	--font-weight-quotation: 400;
	--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;
	--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;

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