/* Typography for the co-op documentation site.
 *
 * Loaded after publishing/brand.css on purpose: the font has to be declared on the
 * elements themselves. Material renders body and headings with
 * var(--md-text-font-family), which it defines on <body>, so a :root-level value
 * loses to it by DOM proximity no matter how the cascade is ordered.
 *
 * Figtree is self-hosted -- see the @font-face rules in brand.css. No CDN, no
 * third-party font service.
 */

body,
.md-typeset,
.md-nav,
.md-header,
.md-tabs,
.md-footer {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-header__title,
.md-nav__title {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  letter-spacing: -0.01em;
}

.md-typeset h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -0.02em; }
.md-typeset h2 { font-size: 1.7rem; font-weight: 600; }
.md-typeset h3 { font-size: 1.25rem; font-weight: 600; }
.md-header__title { font-weight: 600; }

/* Colour is scheme-specific, so it stays out of the rules above. */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4 {
  color: #2d3327;
}