:root {

/*
===========================
Color Variables
===========================
*/

  --body-text-color: #282828;
  --primary-color: #414141;
  --secondary-color: #A20074;
  --tertiary-color: #a8996f;

  --primary-text-color: #ffffff;
  --secondary-text-color: #ffffff;
  --tertiary-text-color: #ffffff;

  --shade1-color: #dfdfdf;
  --shade2-color: #eeeeee;
  --shade3-color: #f1f6f7;

  --body-bg-color: #ffffff;
  --hr-color: #000;


  /* Below variables are not added yet  
  --link-color: #ff738e;
  --hover-color: #414141;
  --extra1-color: black;
  --extra1-color: black;
  */  


  /*
  ===========================
  Header Tag Style Variables
  ===========================
  */

  --h1-color: black;
  --h2-color: black;
  --h3-color: black;
  --h4-color: black;
  --h5-color: black;
  --h6-color: black;

  --h1-font-weight: 900;
  --h2-font-weight: 900;
  --h3-font-weight: 900;
  --h4-font-weight: 900;
  --h5-font-weight: 900;
  --h6-font-weight: 900;

  /*
  ===========================
  Fonts Family Variables
  ===========================
  */

  --font-import-url: 'https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap';
  --serif-font:  "Raleway", serif;
  --sans-serif-font: "Roboto", sans-serif;
  
  --body-font: "Roboto";
  --h1-font: "Raleway";
  --h2-font: "Raleway";
  --h3-font: "Raleway";
  --h4-font: "Raleway";
  --h5-font: "Raleway";
  --h6-font: "Raleway";


  /*
  ===========================
  Fonts Size Variables
  ===========================
  */

  font-size: 16px;

  --body-font-size-max: 20;
  --body-font-size-min: 16;
  --body-line-height: 150%;

  --body-small-size: 14px;
  --body-big-size: 22px;

  --h1-font-size-max: 75;
  --h1-font-size-min: 40;
  --h1-line-height: 150%;

  --h2-font-size-max: 60;
  --h2-font-size-min: 30;
  --h2-line-height: 150%;

  --h3-font-size-max: 50;
  --h3-font-size-min: 25;
  --h3-line-height: 150%;

  --h4-font-size-max: 40;
  --h4-font-size-min: 22;
  --h4-line-height: 150%;

  --h5-font-size-max: 30;
  --h5-font-size-min: 20;
  --h5-line-height: 150%;

  --h6-font-size-max: 25;
  --h6-font-size-min: 18;
  --h6-line-height: 150%;

  /*
  ===========================
  Responsive Size Variables
  ===========================
  */

  --toggle-menu: 900px;

  /*
  ===========================
  Discuss with Jo
  ===========================
  */

  --page-hero-banner-mb-height: 450px;

  /*
  ===========================
  PRe-define veriables for CK5 inages
  ===========================
  */

  --image-border: 20px;
  --image-overlay: rgba(0,0,0,0.4);
  --border-round-radius: 100px;
  --button-semi-round-radius: 10px;

  /*
  ===========================
  Space Size Variables
  ===========================
  */

  --space-dt-3xs: 10px;
  --space-dt-2xs: 15px;
  --space-dt-xs: 20px;
  --space-dt-s: 30px;
  --space-dt-m: 50px;
  --space-dt-l: 80px;
  --space-dt-xl: 100px;
  --space-dt-2xl: 125px;
  --space-dt-3xl: 150px;
  --space-dt-4xl: 176px;

  --space-lp-3xs: 7px;
  --space-lp-2xs: 13px;
  --space-lp-xs: 18px;
  --space-lp-s: 25px;
  --space-lp-m: 40px;
  --space-lp-l: 60px;
  --space-lp-xl: 80px;
  --space-lp-2xl: 110px;
  --space-lp-3xl: 135px;
  --space-lp-4xl: 157px;

  --space-tb-3xs: 5px;
  --space-tb-2xs: 10px;
  --space-tb-xs: 15px;
  --space-tb-s: 20px;
  --space-tb-m: 30px;
  --space-tb-l: 45px;
  --space-tb-xl: 50px;
  --space-tb-2xl: 80px;
  --space-tb-3xl: 110px;
  --space-tb-4xl: 145px;

  --space-mb-3xs: 3px;
  --space-mb-2xs: 7px;
  --space-mb-xs: 10px;
  --space-mb-s: 15px;
  --space-mb-m: 20px;
  --space-mb-l: 25px;
  --space-mb-xl: 35px;
  --space-mb-2xl: 50px;
  --space-mb-3xl: 65px;
  --space-mb-4xl: 100px;

  /*
  ===========================
  Email Variables
  ===========================
  */
  
  --email-fonts: var(--sans-serif-font);
  --email-font-size: 18px;
  --email-h1: 50px;
  --email-h2: 45px;
  --email-h3: 50px;
  --email-h4: 45px;
  --email-h5: 50px;
  --email-h6: 45px;
  /*
    --email-fonts: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
    --email-fonts: Verdana, Geneva, sans-serif;
  */
}