:root {
  /* globals */
  --body-font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  --body-color: var(--primary-700);
  --heading-font-family: 'Bree Serif', serif;
  --heading-color: var(--primary-700);
  --link-color: var(--tertiary-700);
  --link-color-hover: var(--tertiary-900);
  --button-font-size: 16px;

  /* colors */
  --primary-900: #4b4b4b;
  --primary-800: #555555; /* shade + */
  --primary-700: #5e5e5e; /* base */
  --primary-600: #6e6e6e; /* tint + */
  --primary-500: #7e7e7e;
  --primary-400: #8e8e8e;
  --primary-300: #9e9e9e;
  --primary-200: #afafaf;
  --primary-100: #bfbfbf;
  --primary-50: #cfcfcf;

  --secondary-900: #cc7600;
  --secondary-800: #e68400; /* shade + */
  --secondary-700: #ff9300; /* base */
  --secondary-600: #ff9e1a; /* tint + */
  --secondary-500: #ffa933;
  --secondary-400: #ffb34d;
  --secondary-300: #ffbe66;
  --secondary-200: #ffc980;
  --secondary-100: #ffd499;
  --secondary-50: #ffdfb3;

  --tertiary-900: #094c84;
  --tertiary-800: #0a5695; /* shade + */
  --tertiary-700: #0b5fa5; /* base */
  --tertiary-600: #236fae; /* tint + */
  --tertiary-500: #3c7fb7;
  --tertiary-400: #548fc0;
  --tertiary-300: #6d9fc9;
  --tertiary-200: #85afd2;
  --tertiary-100: #9dbfdb;
  --tertiary-50: #b6cfe4;

  --accent-900: #3f5774;
  --accent-800: #476283; /* shade + */
  --accent-700: #4f6d91; /* base */
  --accent-600: #617c9c; /* tint + */
  --accent-500: #728aa7;
  --accent-400: #8499b2;
  --accent-300: #95a7bd;
  --accent-200: #a7b6c8;
  --accent-100: #b9c5d3;
  --accent-50: #cad3de;

  --gray-900: #000000;
  --gray-800: #191919; /* shade + */
  --gray-700: #333333; /* base */
  --gray-600: #444444; /* tint + */
  --gray-500: #666666;
  --gray-400: #7f7f7f;
  --gray-300: #a1a1a1;
  --gray-200: #dbdbdb;
  --gray-100: #eeeeee;
  --gray-50: #f6f6f6;
}