/**
 * Self hosted faces.
 *
 * Loaded before ui.css. Kept in its own file because the token layer names the
 * families and this layer supplies them, and mixing the two would mean the
 * design system could not be read without also reading a font pipeline.
 *
 * Why self hosted rather than a CDN link. A page that fetches a font from a
 * third party tells that third party who is playing and when, on every load,
 * and it makes the interface depend on a host outside our control. Neither is
 * acceptable in a product that handles money. The whole set is 188 KB.
 *
 * Latin subsets only. The player facing copy is English by decision and the
 * full subsets carry Greek, Cyrillic and math ranges that would triple the
 * payload for glyphs nothing renders.
 *
 * `font-display: swap` on purpose. A table that is legible in a fallback face
 * beats a table that is blank: the numbers are the thing being watched, and a
 * flash of unstyled text costs less than a flash of nothing.
 */

/* Identity. One variable file carries weight, width and optical size. The
   width axis is the whole point, money is set condensed, and it only works
   when the face declares the range: without `font-stretch: 75% 100%` the
   browser treats every width as normal and `font-stretch: 85%` is silently
   ignored. That line is the one that was missing everywhere before. */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("./fonts/BricolageGrotesque-var-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-style: normal;
  font-display: swap;
}

/* Reading. Any sentence longer than a label. */
@font-face {
  font-family: "Onest";
  src: url("./fonts/Onest-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Hashes and seeds. A hash is a monospaced object and nothing else on the
   table is. */
@font-face {
  font-family: "Geist Mono";
  src: url("./fonts/GeistMono-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}