/* Same variable font used by zephyr-frontend (src/fonts/Afacad.ttf there),
   so the docs and the web app read as one product. */
@font-face {
  font-family: "Afacad";
  src: url("fonts/Afacad.ttf") format("truetype-variations");
  font-weight: 1 999;
  font-display: swap;
}

/* Furo redeclares --font-stack directly on `body` (see furo.css), which
   shadows any value set on :root since a rule targeting body itself always
   wins over one inherited from an ancestor - so this override has to match
   that same `body` selector, not :root, to actually take effect. */
body {
  /* Furo's default stack, with Afacad prepended - keeps the same fallback
     chain furo ships if the font fails to load. Headings inherit this too,
     since furo's --font-stack--headings aliases it. */
  --font-stack: "Afacad", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";

  /* Furo's defaults (87.5% / 81.25%) read a little small, particularly the
     left-hand sidebar tree, which is the main thing driven by these two. */
  --font-size--small: 100.0%; /* sidebar-item-font-size, sidebar-search-input-font-size */
  --sidebar-caption-font-size: 96.0%; /* section captions above the tree; defaults to --font-size--small--2 (81.25%) */
}

/* Small across-the-board bump (furo's own default is 110%) to match. */
html {
  font-size: 116%;
}

/* Furo's headings (h1: 2.5em, h2: 2em, h3: 1.5em, h4: 1.25em, h5: 1.125em,
   h6: 1em) read a touch large paired with the html bump above - scale each
   down by ~10%. Same selector/specificity as furo's own rules, so this only
   wins because it's loaded after furo.css (see html_css_files in conf.py). */
h1 {
  font-size: 2.25em;
}
h2 {
  font-size: 1.8em;
}
h3 {
  font-size: 1.35em;
}
h4 {
  font-size: 1.125em;
}
h5 {
  font-size: 1.05em;
}
h6 {
  font-size: 0.95em;
}