html,
body {
  background: var(--color-bg-app);
  color: var(--color-text-main);
}

body {
  font-family: var(--font-family-body);
  font-size: var(--font-size-3);
  line-height: var(--line-height-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  color: var(--color-gray-900);
  line-height: var(--line-height-tight);
  letter-spacing: var(--letter-spacing-tight);
}

h1 {
  font-size: var(--font-size-8);
}

h2,
h3 {
  font-size: var(--font-size-6);
}

h4 {
  font-size: var(--font-size-5);
}

h5,
h6 {
  font-size: var(--font-size-4);
}

a {
  color: var(--color-primary-600);
}

a:hover {
  color: var(--color-primary-700);
}

small,
.small,
.text-muted.small {
  font-size: var(--font-size-1);
}

.text-muted {
  color: var(--color-text-muted) !important;
}