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

  /** BASE */
  /* --color-primary:  #660099; */
  /*--color-primary-dark: #480569;*/
  /*--color-primary-dark: #4d0272;*/
  --color-primary:  #660099;
  --color-primary-dark: #570082;

  /** COMPLEMENTARY */
  /* --color-secondary:   #ffc200; */
  /*--color-secondary-dark: #e69c00; */
  --color-secondary:  #f9c624;
  --color-secondary-dark: #f6aa16;


  /** TEXT BODY - (TEXT color:body text) */
  /*--color-text-body: #46423f;*/
  --color-text-body: #000000;
  

  /** TEXT HEADING */
  /*--color-text-heading: #2c2927;*/
  --color-text-heading: #000000;
  

  /** LINK - (link, button, link gradient,button border) */
  --color-link:  var(--color-primary);
  --color-link-dark: var(--color-primary-dark);

  /** PRICE - (Pricing, some titles, button, button border) */
  /* --color-price:  #f7441e; */
  /* --color-price-dark: #f22812; */
  --color-price:  #ee0050;
  --color-price-dark: #da0049;
  

  /** 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:   var(--color-secondary);
  --color-rating-dark: var(--color-secondary-dark);


  /** DARKGRAY - (Usually same as TEXT BODY) */
  /* --color-darkgray:  #46423f; */
  /* --color-darkgray-dark: #302d2b; */
/*  --color-darkgray:  #6c6272; */
/*  --color-darkgray-dark: #625967; */
  --color-darkgray:  #4e4752;
  --color-darkgray-dark: #443e47;

  /** MIDGRAY - (menu, menu gradient) */
  /* --color-midgray:  #9d9994; */
  /* --color-midgray-dark: #89857f; */
  --color-midgray:  #c3bec7;
  --color-midgray-dark: #bab3bd;


  /** LIGHTGRAY - (body bg, dotted heading border, search-text, search-text input border bg etc) */
  /* --color-lightgray:  #f5f5f5; */
  /* --color-lightgray-dark: #ebebeb; */
  /* --color-lightgray:  #dcdadd; */
  /* --color-lightgray-dark: #c1bfc2; */
  --color-lightgray:  #f3f2f4;
  --color-lightgray-dark: #eae8eb;

  /** PRIMARY BACKGROUND - dark text on light background or light text on dark background ('Dark Mode') */
  --color-background-text: #fff;
  /* --color-background-text: #000; */

  /** BASE */
  --color-base:  var(--color-primary);
  --color-base-dark: var(--color-primary-dark);

  /** ACCENT - (CTA 'Call to action': button, button border, gradient) */
  --color-accent:   var(--color-primary);
  --color-accent-dark: var(--color-primary-dark);

  /** COMPLEMENTARY 1 - (button, button gradient, button border) */
  --color-1:  var(--color-secondary);
  --color-1-dark: var(--color-secondary-dark);

  /** COMPLEMENTARY 2 - (button, button gradient, button border) */
  --color-2:  var(--color-primary);
  --color-2-dark: var(--color-primary);

   /** COMPLEMENTARY 3  */
  --color-3:  var(--color-primary);
  --color-3-dark: var(--color-primary);


  /** MISCALANIOUS COLORS (light-shade-a* & light-shade-a* used in offcanvas menu) */
  --color-light-shade-a1: #f4f1f5;
  --color-light-shade-a2: #eae6ed;
  --color-light-shade-a3: #e0dbe5;

  /**/
 
  --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;*/
  --font-weight-body-bold: 600;

  /** FONT HEADING */
  /* --font-family-heading: 'Merriweather',serif; */
  /* --font-weight-heading: 300; */
  /* --text-transform-heading: uppercase; */
  --font-family-heading: 'Open Sans',sans-serif;
  --font-weight-heading: 600;

  --text-transform-heading: none;

  /** FONT QUOTATION */
  /* --font-family-quotation: 'Merriweather',serif; */
  /* --font-weight-quotation: 300; */
  --font-family-quotation: 'Open Sans',sans-serif;
  --font-weight-quotation: 400;
  --font-style-quotation:italic;
  --text-transform-quotation: none;

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

  /** = 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-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-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-size-h3: 1.3em;
  --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-size-box-title: 1.3em;
  --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 === */ 
 
}