@define-mixin bodyCopy {
  font-size: calc(16rem / var(--rem-base));
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-sans-serif);
  line-height: calc(22em / 16);
  letter-spacing: calc(0.2em / 16);
  color: var(--palette-text-primary);
}

@define-mixin bodyShort {
  font-size: var(--font-size-rem-4);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-body-short);
  color: var(--palette-text-primary);
}

@define-mixin fieldDescription {
  font-size: var(--font-size-rem-3);
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-sans-serif);
  line-height: var(--line-height-body-short);
  color: var(--palette-grey-dark);
}

@define-mixin heading1 {
  font-size: calc(24rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-serif);
  line-height: calc(26em / 24);
  letter-spacing: calc(0.2em / 24);
  color: var(--palette-text-primary);
}

@define-mixin heading2 {
  font-size: calc(20rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-serif);
  line-height: calc(22em / 20);
  letter-spacing: calc(0.2em / 20);
  color: var(--palette-text-primary);
}

@define-mixin heading3 {
  font-size: calc(18rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-serif);
  line-height: calc(20em / 18);
  letter-spacing: calc(0.2em / 18);
  color: var(--palette-text-primary);
}

@define-mixin heading4 {
  font-size: calc(16rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-serif);
  line-height: calc(18em / 16);
  letter-spacing: calc(0.2em / 16);
  color: var(--palette-text-primary);
}
@define-mixin heading5 {
  font-size: calc(14rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-serif);
  line-height: calc(16em / 16);
  letter-spacing: calc(0.2em / 16);
  color: var(--palette-text-primary);
}

@define-mixin header1 {
  font-size: calc(24rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans-serif);
  line-height: calc(26em / 24);
  letter-spacing: calc(0.2em / 24);
  color: var(--palette-grey-darkest);
}

@define-mixin header2 {
  font-size: calc(20rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans-serif);
  line-height: calc(22em / 20);
  letter-spacing: calc(0.2em / 20);
  color: var(--palette-grey-darkest);
}

@define-mixin header3 {
  font-size: calc(18rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans-serif);
  line-height: calc(20em / 18);
  letter-spacing: calc(0.2em / 18);
  color: var(--palette-grey-darkest);
}

@define-mixin header4 {
  font-size: calc(16rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans-serif);
  line-height: calc(18em / 16);
  letter-spacing: calc(0.2em / 16);
  color: var(--palette-grey-darkest);
}
@define-mixin header5 {
  font-size: calc(14rem / var(--rem-base));
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-sans-serif);
  line-height: calc(16em / 16);
  letter-spacing: calc(0.2em / 16);
  color: var(--palette-grey-darkest);
}
@define-mixin outline {
  outline-width: 3px;
  outline-color: Highlight;
  outline-color: -webkit-focus-ring-color;
  outline-style: auto;
}

/* V2 --- */

@define-mixin bodyCommentV2 {
  font-size: var(--v2-font-size-3);
  font-weight: var(--v2-font-weight-primary-regular);
  font-family: var(--v2-font-family-primary);
  line-height: var(--v2-line-height-body-comment);
  color: var(--v2-palette-text-primary);
}
