/* Mix the Mix type (docs/design.md, Type). This folder is the one source: edit here, then run
   node scripts/sync-fonts.mjs
   to copy it to the site, the extension, and the app. Do not edit the copies.

   Three roles, never chosen by how long the text is:
     --font-display  page titles (h1) only
     --font-ui       buttons, labels, navigation, section headings, badges, the name beside the logo
     --font-body     everything that is read: paragraphs, hints, inputs, links in text

   Self-hosted, latin subset, SIL Open Font License 1.1 (OFL.txt, THIRD_PARTY_NOTICES.md).
   A browser only downloads a face that something on the page uses, so a face no role points at
   (Big Shoulders Display, when titles are set in Tomorrow) costs nothing. */

@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(barlow-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(barlow-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(tomorrow-500.woff2) format('woff2');
}
@font-face {
  font-family: 'Tomorrow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(tomorrow-600.woff2) format('woff2');
}
@font-face {
  font-family: 'Big Shoulders Display';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(big-shoulders-display-700.woff2) format('woff2');
}

:root {
  --font-body: 'Barlow', system-ui, sans-serif;
  --font-ui: 'Tomorrow', system-ui, sans-serif;
  /* Titles. For Tomorrow everywhere, change this line to: --font-display: var(--font-ui); */
  --font-display: 'Big Shoulders Display', 'Arial Narrow', system-ui, sans-serif;
}