:root {
  --black: #000000;
  --white: #FFFFFF;
  --light-gray: #F4F4F4;

  /* Denim colors */
  --denim-dark: #1C2A39;
  --denim-medium: #3C5168;
  --denim-light: #768AA1;
  
  /* Butter colors */
  --butter-dark: #F7C02D;
  --butter-light: #FFDC7F;
  
  /* Cream */
  --cream: #FFF7E4;
  
  /* Mint colors */
  --mint-dark: #479C8D;
  --mint-light: #7DBDB2;
  
  /* Font families */
  --header-font: 'Sofia Sans Condensed', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --body-font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

  /* Font weights */
  --light-weight: 300;
  --regular-weight: 400;
  --bold-weight: 800;

  --content-max-width: 1244px;
}

.has-weight-light {
  font-weight: var(--light-weight);
}

.has-weight-regular {
  font-weight: var(--regular-weight);
}

.has-weight-bold {
  font-weight: var(--bold-weight);
}

.has-bg-black {
  background-color: var(--black);
  color: var(--cream);
}

.has-bg-white {
  background-color: var(--white);
  color: var(--denim-medium);
}

.has-bg-light-gray {
  background-color: var(--light-gray);
  color: var(--denim-medium);
}

.has-bg-denim-dark {
  background-color: var(--denim-dark);
  color: var(--cream);
}

.has-bg-denim-medium {
  background-color: var(--denim-medium);
  color: var(--cream);
}

.has-bg-denim-light {
  background-color: var(--denim-light);
  color: var(--cream);
}

.has-bg-butter-dark {
  background-color: var(--butter-dark);
}

.has-bg-butter-light {
  background-color: var(--butter-light);
}

.has-bg-cream {
  background-color: var(--cream);
}

.has-bg-mint-dark {
  background-color: var(--mint-dark);
}

.has-bg-mint-light {
  background-color: var(--mint-light);
}

.has-color-black {
  color: var(--black);
}

.has-color-white {
  color: var(--white);
}

.has-color-light-gray {
  color: var(--light-gray);
}

.has-color-denim-dark {
  color: var(--denim-dark);
}

.has-color-denim-medium {
  color: var(--denim-medium);
}

.has-color-denim-light {
  color: var(--denim-light);
}

.has-color-butter-dark {
  color: var(--butter-dark);
}

.has-color-butter-light {
  color: var(--butter-light);
}

.has-color-cream {
  color: var(--cream);
}

.has-color-mint-dark {
  color: var(--mint-dark);
}

.has-color-mint-light {
  color: var(--mint-light);
}