/* ==========================================================================
   Typography: the type styles from docs/typography.md.
   Requires tokens.css and fonts.css.

   Each style is available two ways:
   - HTML headings and body text pick it up automatically (h1 looks like H1).
   - A class applies it to any element: .text-h1 … .text-h6, .text-body.
     Use the class when the look and the document structure differ, e.g. a
     <p> that should look like H4, or a button that uses H5.
   H5 and H6 are styles only; they are not meant for <h5>/<h6> tags.
   ========================================================================== */

body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--text-body-leading);
  letter-spacing: var(--text-body-tracking);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

h1, .text-h1 {
  font-family: var(--font-sans);
  font-size: var(--text-h1-size);
  font-weight: var(--weight-bold);
  line-height: var(--text-h1-leading);
  letter-spacing: var(--text-h1-tracking);
}

h2, .text-h2 {
  font-family: var(--font-sans);
  font-size: var(--text-h2-size);
  font-weight: var(--weight-bold);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
}

h3, .text-h3 {
  font-family: var(--font-sans);
  font-size: var(--text-h3-size);
  font-weight: var(--weight-medium);     /* Medium for now; see docs/decisions.md */
  line-height: var(--text-h3-leading);
  letter-spacing: var(--text-h3-tracking);
}

/* Statement: large Medium copy, e.g. the Company mission. 40px on desktop. */
.text-statement {
  font-family: var(--font-sans);
  font-size: var(--text-statement-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-statement-leading);
  letter-spacing: var(--text-statement-tracking);
}

h4, .text-h4 {
  font-family: var(--font-sans);
  font-size: var(--text-h4-size);
  font-weight: var(--weight-bold);
  line-height: var(--text-h4-leading);
  letter-spacing: var(--text-h4-tracking);
}

.text-h5 {
  font-family: var(--font-mono);
  font-size: var(--text-h5-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h5-leading);
  letter-spacing: var(--text-h5-tracking);
}

.text-h6 {
  font-family: var(--font-mono);
  font-size: var(--text-h6-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-h6-leading);
  letter-spacing: var(--text-h6-tracking);
}

.text-body {
  font-family: var(--font-sans);
  font-size: var(--text-body-size);
  font-weight: var(--weight-regular);
  line-height: var(--text-body-leading);
  letter-spacing: var(--text-body-tracking);
}

/* Muted text, e.g. program system lists */
.text-muted { color: var(--color-text-muted); }