h1,
h2 {
  color: var(--color-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: unset;
  color: var(--color-text);
  font-family: var(--font-heading);
}

p,
span,
div,
a,
th,
td,
label,
button {
  /* Default styling for text within the app */
  margin: unset;
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: var(--text-size-m);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

h1 {
  font-size: var(--heading-size-l);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

h2 {
  font-size: var(--heading-size-m);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

h3 {
  font-size: var(--heading-size-s);
  line-height: 1.3;
  letter-spacing: 0px;
}

h4 {
  font-family: var(--font-primary);
  font-size: var(--text-size-l);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0px;
}

.sb-text-small {
  line-height: 1;
  font-weight: 400;
  font-size: var(--text-size-s);
  font-family: var(--font-primary);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

.sb-text-medium {
  line-height: 1;
  font-weight: 400;
  font-size: var(--text-size-m);
  font-family: var(--font-primary);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

.sb-text-large {
  line-height: 1;
  font-weight: 400;
  font-size: var(--text-size-l);
  font-family: var(--font-primary);
  line-height: 1.7;
  letter-spacing: 0.5px;
}

.sb-header-large {
  font-size: var(--heading-size-l);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.5px;
}

.sb-header-medium {
  font-size: var(--heading-size-m);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

.sb-header-small {
  font-size: var(--heading-size-s);
  line-height: 1.3;
  letter-spacing: 0px;
}

.sb-header-x-small {
  font-family: var(--font-primary);
  font-size: var(--text-size-l);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0px;
}