:root {
  /* globals */
  --body-font-family: Poppins,sans-serif;
  --body-color: var(--tertiary-700);
  --heading-font-family: var(--body-font-family);
  --heading-color: var(--primary-900);
  --link-color: var(--secondary-700);
  --link-color-hover: var(--secondary-900);
  --button-font-size: 15px;

  /* colors */
  --primary-900: #0e7752;
  --primary-800: #1eb680; /* shade + */
  --primary-700: #21ca8e; /* base */
  --primary-600: #37cf99; /* tint + */
  --primary-500: #4dd5a5;
  --primary-400: #64dab0;
  --primary-300: #7adfbb;
  --primary-200: #90e5c7;
  --primary-100: #a6ead2;
  --primary-50: #bcefdd;

  --secondary-900: #203e58;
  --secondary-800: #244563; /* shade + */
  --secondary-700: #284d6e; /* base */
  --secondary-600: #3e5f7d; /* tint + */
  --secondary-500: #53718b;
  --secondary-400: #69829a;
  --secondary-300: #7e94a8;
  --secondary-200: #94a6b7;
  --secondary-100: #a9b8c5;
  --secondary-50: #bfcad4;

  --tertiary-900: #525556;
  --tertiary-800: #5d5f61; /* shade + */
  --tertiary-700: #676a6c; /* base */
  --tertiary-600: #76797b; /* tint + */
  --tertiary-500: #858889;
  --tertiary-400: #959798;
  --tertiary-300: #a4a6a7;
  --tertiary-200: #b3b5b6;
  --tertiary-100: #c2c3c4;
  --tertiary-50: #d1d2d3;

  --accent-900: #b32a2a;
  --accent-800: #ca3030; /* shade + */
  --accent-700: #e03535; /* base */
  --accent-600: #e34949; /* tint + */
  --accent-500: #e65d5d;
  --accent-400: #e97272;
  --accent-300: #ec8686;
  --accent-200: #f09a9a;
  --accent-100: #f3aeae;
  --accent-50: #f6c2c2;

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