:root {
  --color-black: #fff;
  --color-gray-5: #555;
  --color-gray-7: #777;
  --color-gray-9: #999;
  --color-gray-e: #EEE;
  --color-gray-e0: #E0E0E0;
  --color-gray-f0: #F0F0F0;
  --color-white: #000;

  --color-black-blue: #05222A;
  --color-blue: #5bc0de;
  --color-blue2: #32bdf2;
  --color-foxy: #ff8829;
  --color-gray: #e8e8e8;
  --color-gray-darky: #C3D0D4;
  --color-gray-darky-red: #BBB9B9;
  --color-green: #49872E;
  --color-greeny: #13d9b4;
  --color-green-pure: #008000;
  --color-red: #fc393e;
  --color-red-pure: #ff0000;
  --color-white-blue: #EDF7FF;
  --color-yellow: #fff849;
  --color-yellow-greeny: #eaff47;
  --color-yellow-pale: #faffbd;
  
  --color-background: #e8e8e8;
  --color-head: #b29e89;
  --color-header-background: #f7528e;
  --color-text: #4b7abc;
  
  --color-info: #13d9b4;
  --color-error: #fc393e;
  --color-success: #13d9b4;
  --color-warning: #ff8829;
  
  --color-badge-primary: #03a9f4;
  --color-badge-success: #8bc34a;
  --color-badge-warning: #ffc107;
  --color-badge-danger: #e51c23;
}

#foo h1 {
  color: var(--color-background);
}