:root {
  /***** COLOURS *****/
  --swatch--black: black;

  --swatch--white: #ffffff;
  --swatch--grey: #f7f7f7;
  --swatch--mid-grey: #8c8c8c;
  --swatch--dark-grey: #2e2e2e;
  --swatch--yellow: #f9fa92;
  --swatch--blue: #002fff;
  --swatch--light-blue: #e5eaff;
  --swatch--stroke: #d9d9d9;

  --swatch--text-hint: #b3b3b3;
  --swatch--text-secondary: #595959;

  /*** SPACING ****/
  --padd--8: 0.5em;
  --padd--24: 1.5em;
  --padd--30: 1.875em;
  --padd--40: 2.5em;
  --padd--60: 3.75em;
  --padd--80: 5em;
  --padd--100: 6.25em;
  --padd--120: 7.5em;
  --padd--side: 3.75em;

  /*** FONTS ***/
  --main: Acronym, Arial, sans-serif;
  --heading: Hedvig Letters Serif, serif;
  --mono: CS Alice Mono, Arial, sans-serif;

  /*** FONT SIZES ***/
  --fs--h1: 3em;
  --fs--h2: 2.5em;
  --fs--h3: 2.25em;
  --fs--h4: 1.5em;
  --fs--h5: 1.375em;
  --fs--body: 1em;
  --fs--body-lrg: 1.125em;
  --fs--body-sml: 0.81em;

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

  /*** BORDER RADUS ***/
  --border-radius: 0.7em;

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

    /*** FONT SIZES ***/
    --fs--h1: 36px;
    --fs--h2: 30px;
    --fs--h3: 28px;
    --fs--h4: 18px;
    --fs--h5: 18px;
    --fs--body: 15px;
    --fs--body-lrg: 16px;
    --fs--body-sml: 12px;
  }
}