:root {
  --black: #474747;
  --brown: #5F2D06;
  --dark-green: #3B4924;
  --green: #95A859;
  --light-brown: #D7B673;
  --white: #EEECEA;
  --bg-0: #FFFFFF;
  --bg-50: #F5F5F5;
  --bg-100: #E2E4E9;;
  --bg-200: #C6C8D2;
  --bg-300: #A4A8B7;
  --bg-400: #7F859F;
  --bg-500: #3C4467;
  --bg-600: #2D334D;
  --bg-700: #131620;
}

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

.color-brown {
  color: var(--brown);
}

.color-dark-green {
  color: var(--dark-green);
}

.color-green {
  color: var(--green);
}

.color-light-brown {
  color: var(--light-brown);
}

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

.color-bg-0 {
  color: var(--bg-0);
}

.color-bg-50 {
  color: var(--bg-50);
}

.color-bg-100 {
  color: var(--bg-100);
}

.color-bg-200 {
  color: var(--bg-200);
}

.color-bg-300 {
  color: var(--bg-300);
}

.color-bg-400 {
  color: var(--bg-400);
}

.color-bg-500 {
  color: var(--bg-500);
}

.color-bg-600 {
  color: var(--bg-600);
}

.color-bg-700 {
  color: var(--bg-700);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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