:root {
  /* Red */
  --red: #b30000;
  /* Greys */
  --grey-900: #000000;
  --grey-800: #222222;
  --grey-700: #464646;
  --grey-600: #6c6c6c;
  --grey-500: #909090;
  --grey-400: #b1b1b1;
  --grey-300: #d5d5d5;
  --grey-200: #e6e6e6;
  --grey-100: #f8f8f8;
  --grey-75: #fdfdfd;
  --grey-0: #fff;
  /* Yellow */
  --yellow-900: #574400;
  --yellow-700: #946a00;
  --yellow-500: #dbab00;
  --yellow-300: #f6e7ae;
  --yellow-100: #fff9e2;
  /* Orange */
  --orange-900: #5d3200;
  --orange-700: #874900;
  --orange-500: #b35f00;
  --orange-300: #f7e2cd;
  --orange-100: #fff7f0;
  /* Pink */
  --pink-900: #590020;
  --pink-700: #80163d;
  --pink-500: #aa486c;
  --pink-300: #eed4dd;
  --pink-100: #fff2f6;
  /* Purple */
  --purple-900: #2d0c3a;
  --purple-700: #563664;
  --purple-500: #735480;
  --purple-300: #e1ccea;
  --purple-100: #f9f0fd;
  /* Blue */
  --blue-900: #0f365c;
  --blue-700: #29527b;
  --blue-500: #4272a2;
  --blue-300: #cedff1;
  --blue-100: #eff7ff;
  /* Green */
  --green-900: #173c0f;
  --green-700: #3f6136;
  --green-500: #5a7a52;
  --green-300: #cee1c9;
  --green-100: #ebf2e9;

}

.font-color-red {
  color: var(--red);
}

.font-color-grey-900 {
  color: var(--grey-900);
}

.font-color-grey-800 {
  color: var(--grey-800);
}

.font-color-grey-700 {
  color: var(--grey-700);
}

.font-color-grey-600 {
  color: var(--grey-600);
}

.font-color-grey-500 {
  color: var(--grey-500);
}

.font-color-grey-400 {
  color: var(--grey-400);
}

.font-color-grey-300 {
  color: var(--grey-300);
}

.font-color-grey-200 {
  color: var(--grey-200);
}

.font-color-grey-100 {
  color: var(--grey-100);
}

.font-color-grey-75 {
  color: var(--grey-75);
}

.font-color-grey-0 {
  color: var(--grey-0);
}