* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  background-color: var(--color-bg);
  color: var(--color-text);
}

a {
  color: inherit;
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
}

/* content hierarchy */

.type-display {
  font-size: var(--type-display-size);
  font-weight: var(--type-display-weight);
  line-height: var(--type-display-line);
  color: var(--color-text-strong);
}

.type-heading {
  font-size: var(--type-heading-size);
  font-weight: var(--type-heading-weight);
  line-height: var(--type-heading-line);
  color: var(--color-text-strong);
}

.type-title {
  font-size: var(--type-title-size);
  font-weight: var(--type-title-weight);
  line-height: var(--type-title-line);
  color: var(--color-text-strong);
}

.type-body {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-line);
  color: var(--color-text-muted);
}

.type-meta {
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-line);
  color: var(--color-text-subtle);
}

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

/* ui typography */

.type-brand {
  font-size: var(--type-brand-size);
  font-weight: var(--type-brand-weight);
  line-height: var(--type-brand-line);
}

.type-nav {
  font-size: var(--type-nav-size);
  font-weight: var(--type-nav-weight);
  line-height: var(--type-nav-line);
}

.type-ui {
  font-size: var(--type-ui-size);
  font-weight: var(--type-ui-weight);
  line-height: var(--type-ui-line);
}