:root {
  /* Hues */
  --primary: 71, 183, 171;
  --secondary: 249, 114, 84;
  --tertiary: 74, 76, 161;
  --link: 84, 114, 210;
  --success: 57, 203, 140;
  --error: 243, 57, 51;

  /* Theming */
  --main-bg: #f5f7fa; /* main background color - gray-lightest */
  --content-bg: #ffffff; /* background color of content blocks - white */
  --button-bg: #2f353a; /* default button background color - gray-darkest */

  /* Color Definitions */
  --primary-full: rgb(var(--primary));
  --primary-50: rgba(var(--primary), 0.5);
  --primary-65: rgba(var(--primary), 0.65);
  --secondary-full: rgb(var(--secondary));
  --tertiary-full: rgb(var(--tertiary));
  --link-full: rgb(var(--link));
  --success-full: rgb(var(--success));
  --success-90: rgba(var(--success), 0.9);
  --success-65: rgba(var(--success), 0.65);
  --error-full: rgb(var(--error));
  --error-60: rgba(var(--error), 0.6);
  --error-65: rgba(var(--error), 0.65);
}

:root.dark {
  /* Theming */
  --main-bg: rgba(17, 24, 39, 1); /* gray-900 */
  --content-bg: rgba(31, 41, 55, 1); /* gray-800 */
  --button-bg: var(--main-bg);
}