/* ===========================================================================
   fonts.css  —  the two HYPERINFRA typefaces
   ---------------------------------------------------------------------------
   The console uses the same two typefaces as the public website, from the same
   two files, so the two sites are the same object rather than a lookalike.

   WHY THIS IS NOT THE MOCKUP'S VERSION OF THIS FILE.
   mockup/assets/fonts.css writes both font files into itself as text (base64),
   which makes that one file about 150 kilobytes. It has a good reason: the
   mockups are opened by double-clicking them, with no web server running, and
   a browser opened that way refuses to load font FILES sitting next to the
   page. Writing the font into the stylesheet sidesteps the refusal, because
   there is no separate file to fetch.

   The console is served by the gate over HTTP, so that refusal does not apply
   and the reason is gone. Two ordinary .woff2 files are better here: the
   browser caches them separately from the stylesheet, so a change to a colour
   does not make somebody download the typefaces again.

   THE FILES ARE COPIES, NOT SHARED. assets/fonts/ holds its own copy of each
   file, byte for byte the same as the public website's. Pointing at the
   website's copy would mean the console fetching something from another site,
   which the public site's Privacy Policy promises does not happen and which
   would break the console on any day the website was moved.
   =========================================================================== */

/* Fraunces — used for headings. One file covers every weight from 300 to 700,
   which is why there is one @font-face here and not five. */
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/fraunces-latin.woff2') format('woff2');
  font-weight: 300 700;              /* the range of weights inside the file */
  font-style: normal;
  font-display: swap;                /* show fallback text first, swap when ready */
}

/* Inter — used for body text, labels, tables and everything that is not a
   heading. Same arrangement: one file, the whole weight range. */
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter-latin.woff2') format('woff2');
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}