:root {
  /***** COLOURS *****/
  --swatch--black: #242424;
  --swatch--white: #ffffff;
  --swatch--dark-green: #40644a;
  --swatch--light-green: #cae2b1;
  --swatch--off-white: #f3f0ef;
  --swatch--warm-grey: #e3dfde;
  --swatch--light-grey: #aaaaaa;
  --swatch--dark-grey: #646464;

  /*** SPACING ****/
  --padd--30: 1.875em; /* 30px */
  --padd--50: 3.125em; /* 50px */
  --padd--70: 4.375em; /* 70px */
  --padd--100: 6.25em; /* 100px */
  --padd--165: 10.3em; /* 165px */
  --padd--200: 12.5em; /* 200px */
  --padd--side: 3.75em; /* 60px */

  /*** FONTS ***/
  --font-family--heading: "Poppins", sans-serif;
  --font-family--body: "Poppins", sans-serif;
  --font-family--blog-heading: "Playfair Display", serif;

  /*** FONT SIZES ***/
  --fs--h1: 4.06em; /* 65px */
  --fs--h2: 2.5em; /* 40px */
  --fs--h3: 1.75em; /* 28px */
  --fs--h4: 1.25em; /* 20px */
  --fs--h5: 1.125em; /* 18px */
  --fs--body: 1em; /* 16px */
  --fs--body-lrg: 1.25em; /* 20px */
  --fs--body-sml: 0.88em; /* 14px */
  --fs--button: 1.25em; /* 20px */
  --fs--button-sml: 1em; /* 16px */

  /*** EASING ***/
  --transition--ease: cubic-bezier(0.625, 0.05, 0, 1);

  /*** RESPONSIVE ***/
  @media all and (max-width: 768px) {
    --fs--h1: 40px;
    --fs--h2: 36px;
    --fs--h3: 28px;
    --fs--h4: 23px;
    --fs--h5: 20px;
    --fs--body: 16px;
    --fs--body-lrg: 16px;
    --fs--body-sml: 14px;
    --fs--button: 18px;
    --fs--button-sml: 16px;

    /*** SPACING ****/
    --padd--side: 20px;
    --padd--50: 40px;
    --padd--100: 70px;
    --padd--165: 100px;
  }
}