:root {
  /* globals */
  --body-font-family: Noto Sans,sans-serif;
  --body-color: #505568;
  --heading-font-family: Noto Sans,sans-serif;
  --heading-color: #252a42;
  --link-color: var(--secondary-800);
  --link-color-hover: var(--secondary-900);
  --button-font-size: 14px;

  /* colors */
  --primary-900: #1e2235;
  --primary-800: #21263b; /* shade + */
  --primary-700: #252a42; /* base */
  --primary-600: #3b3f55; /* tint + */
  --primary-500: #515568;
  --primary-400: #666a7b;
  --primary-300: #7c7f8e;
  --primary-200: #9295a1;
  --primary-100: #a8aab3;
  --primary-50: #bebfc6;

  --secondary-900: #aa4349;
  --secondary-800: #c04c52; /* shade + */
  --secondary-700: #c7474e; /* base */
  --secondary-600: #d9656b; /* tint + */
  --secondary-500: #dd767c;
  --secondary-400: #e2878c;
  --secondary-300: #e6989d;
  --secondary-200: #eaaaad;
  --secondary-100: #eebbbd;
  --secondary-50: #f2ccce;

  --tertiary-900: #0061ab;
  --tertiary-800: #006dc1; /* shade + */
  --tertiary-700: #0079d6; /* base */
  --tertiary-600: #1a86da; /* tint + */
  --tertiary-500: #3394de;
  --tertiary-400: #4da1e2;
  --tertiary-300: #66afe6;
  --tertiary-200: #80bceb;
  --tertiary-100: #99c9ef;
  --tertiary-50: #b3d7f3;

  --accent-900: #bf3737;
  --accent-800: #d73e3e; /* shade + */
  --accent-700: #ef4545; /* base */
  --accent-600: #f15858; /* tint + */
  --accent-500: #f26a6a;
  --accent-400: #f47d7d;
  --accent-300: #f58f8f;
  --accent-200: #f7a2a2;
  --accent-100: #f9b5b5;
  --accent-50: #fac7c7;

  --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;
}