:root {
  /***** COLOURS *****/
  --swatch--black: #191819;
  --swatch--white: #ffffff;
  --swatch--grey: #999999;

  /*** SPACING ****/

  --padd--30: 2em;
  --padd--45: 2.8em;
  --padd--60: 3.75em;
  --padd--90: 5.6em;
  --padd--140: 8.75em;
  --padd--170: 10.6em;
  --padd--220: 10em;
  --padd--side: 2.5em;

  /*** FONTS ***/
  --gotham: "Gotham", sans-serif;
  --baskerville: "Libre Baskerville", serif;

  /*** FONT SIZES ***/
  --fs--display: 1em; /* 16px */
  --fs--h1: 1.5em; /* 24px */
  --fs--h2: 1em; /* 16px */
  --fs--h3: 1em; /* 16px */
  --fs--h4: 1em; /* 16px */
  --fs--h5: 1em; /* 16px */
  --fs--body: 1em; /* 16px */
  --fs--body-lrg: 1.1em; /* 17.6px */
  --fs--body-sml: 0.8em; /* 12.8px */
  --fs--body-micro: 0.7em; /* 11.2px */
  --fs--button: 1em; /* 16px */

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

  /*** RESPONSIVE ***/
  @media all and (max-width: 768px) {
    /*** SPACING ****/
    --padd--side: 20px;
    --padd--45: 40px;
    --padd--90: 70px;
    --padd--140: 100px;
    --padd--220: 120px;

    --fs--body: 15px;
    --fs--body-lrg: 15px;
    --fs--body-sml: 13px;
  }
}