:root {

  --red-0: rgba(195, 9, 62, 1);
  --red-1: rgba(223, 43, 64, 1);
  --red-2: rgba(238, 88, 93, 1);
  --red-3: rgba(248, 135, 141, 1);
  --red-4: rgba(248, 186, 186, 1);
  --red-5: rgba(253, 232, 232, 1);

  --purple-0: rgba(64, 33, 131, 1);
  --purple-1: rgba(103, 56, 205, 1);
  --purple-2: rgba(138, 95, 231, 1);
  --purple-3: rgba(177, 142, 250, 1);
  --purple-4: rgba(214, 196, 253, 1);
  --purple-5: rgba(238, 231, 254, 1);

  --orange-0: rgba(186, 91, 3, 1);
  --orange-1: rgba(241, 151, 4, 1);
  --orange-2: rgba(246, 183, 81, 1);
  --orange-3: rgba(254, 209, 133, 1);
  --orange-4: rgba(255, 227, 184, 1);
  --orange-5: rgba(255, 241, 225, 1);

  --navy-0: rgba(20, 32, 72, 1);
  --navy-1: rgba(50, 60, 103, 1);
  --navy-2: rgba(83, 90, 141, 1);
  --navy-3: rgba(127, 135, 184, 1);
  --navy-4: rgba(188, 193, 220, 1);
  --navy-5: rgba(222, 225, 237, 1);
  --navy-6: rgba(245, 246, 250, 1);

  --gray-0: rgba(42, 44, 50, 1);
  --gray-1: rgba(70, 73, 83, 1);
  --gray-2: rgba(101, 105, 118, 1);
  --gray-3: rgba(142, 146, 159, 1);
  --gray-4: rgba(208, 210, 215, 1);
  --gray-5: rgba(233, 234, 236, 1);
  --gray-6: rgba(244, 244, 246, 1);

  --black: rgba(23, 25, 28, 1);
  --white-0: rgba(253, 253, 253, 1);
  --white-1: rgba(255, 255, 255, 1);

  --approval-0: rgba(30, 73, 36, 1);
  --approval-1: rgba(52, 131, 64, 1);
  --approval-2: rgba(64, 160, 78, 1);
  --approval-3: rgba(133, 194, 140, 1);
  --approval-4: rgba(168, 211, 173, 1);

  --attention-0: rgba(116, 80, 25, 1);
  --attention-1: rgba(210, 145, 47, 1);
  --attention-2: rgba(255, 177, 58, 1);
  --attention-3: rgba(255, 205, 121, 1);
  --attention-4: rgba(255, 218, 158, 1);

  --warning-0: rgba(112, 26, 27, 1);
  --warning-1: rgba(202, 44, 50, 1);
  --warning-2: rgba(239, 60, 66, 1);
  --warning-3: rgba(250, 130, 129, 1);
  --warning-4: rgba(251, 166, 164, 1);

  /* Font sizes */
  /* these two are only used on error pages */
  --font-104: 6.5rem;
  --font-84: 5.25rem;
  --font-53: 3.3125rem;
  --font-43: 2.6875rem;
  --font-34: 2.125rem;
  --font-28: 1.75rem;
  --font-22: 1.375rem;
  --font-17: 1.0625rem;
  --font-14: 0.875rem;

  --line-height-16: 1rem;
  --line-height-18: 1.125rem;
  --line-height-20: 1.25rem;
  --line-height-24: 1.5rem;
  --line-height-32: 2rem;
  --line-height-40: 2.5rem;
  --line-height-48: 3rem;
  --line-height-56: 3.5rem;
  --line-height-64: 4rem;

  /* Spacing */
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-18: 18px;
  --spacing-24: 24px;
  --spacing-28: 28px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-72: 72px;
  --spacing-88: 88px;
  --spacing-96: 96px;

  /* Breakpoints */
  --breakpoint-xs: 0;
  --breakpoint-sm: 375px;
  --breakpoint-md: 520px;
  --breakpoint-lg: 768px;
  --breakpoint-xl: 1168px;

  --max-width: 1136px;
}

.content-block {
  font-size: var(--font-17);
  line-height: var(--line-height-24);
  color: var(--gray-1);
}

.content-block.on-dark {
  color: white;
}