/** 
 (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:		#ec008c;
  --color-link-dark:	#c40978;
 
  /** 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:		#ec008c;
	--color-base-dark:	#c40978;
 
  /** 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:		#ffe07c;
  --color-lightgray-dark: 	#f0d376;

  /** 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:			#ec008c;
	--color-accent-dark:	#c40978;
 
  /** 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;
	
	--color-5: #ffd243;
	
  --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-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: 700;
  --text-transform-preamble: none;
  --font-style-preamble: normal;

  /** FONT QUOTATION */
  --font-family-quotation: 'Merriweather',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;
  --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 === */ 
 
}