/* Streamform documentation: the same identity as the landing page. */
/* mdBook sets html { font-size: 62.5% }, so 1rem = 10px throughout this file. */
:root {
  --sf-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sf-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --sf-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --sf-accent: #0E7C66;
  --content-max-width: 780px;
}
.ayu, .navy, .coal { --sf-accent: #4FC3A6; }

html { font-family: var(--sf-body); }
body { font-family: var(--sf-body); font-size: 1.75rem; line-height: 1.55; }
code, pre, kbd, .hljs { font-family: var(--sf-mono); }
.content pre > code { font-size: 1.45rem; line-height: 1.5; }
:not(pre) > code { font-size: 0.9em; }

.content h1, .content h2, .content h3, .content h4 {
  font-family: var(--sf-display);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.content h1 { font-variation-settings: "opsz" 72, "wdth" 84; font-weight: 700; font-size: 3.8rem; line-height: 1.05; }
.content h2 { font-variation-settings: "opsz" 40, "wdth" 88; font-weight: 700; font-size: 2.6rem; margin-top: 2.2em; }
.content h3 { font-variation-settings: "opsz" 24, "wdth" 92; font-weight: 600; font-size: 2rem; }
.content p, .content li { max-width: 68ch; text-wrap: pretty; }
.content table { font-size: 1.6rem; }
.content table td, .content table th { vertical-align: top; }

.menu-title { font-family: var(--sf-display); font-variation-settings: "opsz" 24, "wdth" 92; font-weight: 700; letter-spacing: -0.01em; }
.sidebar { font-family: var(--sf-body); font-size: 1.55rem; }
.chapter li.part-title {
  font-family: var(--sf-display); font-variation-settings: "opsz" 12, "wdth" 100;
  font-size: 1.2rem; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; opacity: 0.7;
  margin-top: 1.2em;
}
.chapter li.chapter-item a.active, .chapter li a:hover { color: var(--sf-accent); }
a { color: var(--sf-accent); }
.content a:not(.header) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content .header:hover { text-decoration: none; }