/* Reusable type roles */

.type-display-xl,
.type-display-lg,
.type-editorial,
.type-heading,
h1,
h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-display);
  letter-spacing: 0;
}

.type-display-xl {
  font-size: var(--type-display-xl);
  line-height: var(--leading-display-tight);
}

.type-display-lg {
  font-size: var(--type-display-lg);
  line-height: var(--leading-title);
}

h1 {
  font-size: var(--type-page-title);
  line-height: var(--leading-title);
}

.type-editorial {
  font-size: var(--type-section-heading);
  line-height: var(--leading-heading);
}

.type-heading,
h2 {
  font-size: var(--type-heading-xs);
  line-height: var(--leading-heading);
}

.type-body-lg,
.type-body {
  color: var(--color-muted);
  font-family: var(--font-copy-serif);
  font-weight: 400;
}

.type-body-lg {
  font-size: var(--type-body-lg);
  line-height: var(--leading-copy);
}

.type-body {
  font-size: var(--type-body);
  line-height: var(--leading-copy);
}

.type-meta,
.type-nav,
.type-button {
  font-family: var(--font-sans);
}

.type-meta {
  color: var(--color-muted);
  font-size: var(--type-meta);
  font-weight: var(--weight-label);
  letter-spacing: var(--tracking-label);
  line-height: var(--leading-label);
  text-transform: uppercase;
}

.type-nav {
  color: var(--color-muted);
  font-size: var(--type-nav);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--leading-nav);
}

.type-button {
  font-size: var(--type-button);
  font-weight: 750;
  letter-spacing: 0;
  line-height: 1;
  text-transform: none;
}

/* Global heading defaults */

h3 {
  font-family: var(--font-serif);
  font-size: var(--type-title-sm);
  font-weight: var(--weight-display);
  letter-spacing: 0;
  line-height: var(--leading-heading);
}