// =============== Common ===============
.typography-paragraph() {
  margin-bottom: 1em;
}

.typography-title(@fontSize; @fontWeight; @lineHeight; @headingColor; @headingMarginBottom; @letterSpacing;) {
  margin-bottom: @headingMarginBottom;
  color: @headingColor;
  font-weight: @fontWeight;
  font-size: @fontSize;
  font-family: @display-font-family;
  line-height: @line-height-base * (@lineHeight / @line-height-base);
  letter-spacing: @letterSpacing;
}

.typography-body(@fontSize; @lineHeight; @letterSpacing;) {
  font-size: @fontSize;
  font-family: @body-font-family;
  line-height: @line-height-base * (@lineHeight / @line-height-base);
  letter-spacing: @letterSpacing;
}

.typography-title-1() {
  .typography-title(
    @heading-1-size,
    @typography-title-font-weight,
    56,
    @heading-color,
    @typography-title-margin-bottom,
    0
  );
}
.typography-title-2() {
  .typography-title(
    @heading-2-size,
    @typography-title-font-weight,
    48,
    @heading-color,
    @typography-title-margin-bottom,
    0
  );
}
.typography-title-3() {
  .typography-title(
    @heading-3-size,
    @typography-title-font-weight,
    36,
    @heading-color,
    @typography-title-margin-bottom,
    0
  );
}
.typography-title-4() {
  .typography-title(
    @heading-4-size,
    @typography-title-font-weight,
    28,
    @heading-color,
    @typography-title-margin-bottom,
    0
  );
}
.typography-title-5() {
  .typography-title(
    @heading-5-size,
    @typography-title-font-weight,
    @line-height-base,
    @heading-color,
    @typography-title-margin-bottom,
    0.2px
  );
}
.typography-title-6() {
  .typography-title(
    @heading-6-size,
    @typography-title-font-weight,
    20,
    @heading-color,
    @typography-title-margin-bottom,
    0.4px
  );
}
.typography-title-7() {
  .typography-title(
    @heading-7-size,
    @typography-title-font-weight,
    16,
    @heading-color,
    @typography-title-margin-bottom,
    0.5px
  );
}

.typography-body-jumbo() {
  .typography-body(@font-size-xl, 32, 0);
}
.typography-body-large() {
  .typography-body(@font-size-lg, 28, 0);
}
.typography-body-medium() {
  .typography-body(@font-size-base, @line-height-base, 0);
}
.typography-body-small() {
  .typography-body(@font-size-sm, 20, 0.1px);
}
.typography-body-mini() {
  .typography-body(@font-size-xs, 16, 0.2px);
}
