/* The two typefaces of Companion, built into the app itself (R38).
 *
 * Lora is the serif voice — headings, scenario titles, the criterion names of the assessment and
 * the chat's answer bubbles — and Inter is the interface — buttons, labels and menus. Which
 * element gets which is NOT decided here: this file only tells the browser where the two families
 * live. The common ground (the --font-* tokens and the rules that use them) is app.css.
 *
 * Nothing here points at a site outside the app. Every src is a file in THIS folder, served by
 * Companion on its own port 8080 (see the /static/fonts/<file> rule in app.py), so the interface
 * needs no outbound traffic and looks the same with the network unplugged. No address of a
 * typeface service belongs in this file — not Google Fonts, not Typekit, not a CDN of any kind,
 * and not as an @import either. FONTS.md next to this file says it again, with the names.
 *
 * ONE FILE PER TYPEFACE, three rules out of it: both families are variable fonts, where a single
 * file carries the whole weight axis, so Lora-Variable.woff2 and Inter-Variable.woff2 are all
 * there is in the folder. Each rule below names the one weight it wants out of its file, and the
 * browser draws that weight from the axis — a file under one URL is fetched once however many
 * rules point at it, so the interface costs two font requests and not six. tools/fetch_fonts.py
 * in the project folder is what put the two files here, and says where they came from.
 *
 * Weights, and only these: 400 regular, 500 medium, 600 semi-bold. Anything the interface asks
 * for that is not declared (700, 300) the browser makes up by thickening the nearest one, which
 * is worse than asking for the nearest one on purpose.
 */

/* ---------------------------------------------------------------- Lora (serif) */

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Lora-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("Lora-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Lora";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("Lora-Variable.woff2") format("woff2");
}

/* Italic is not declared, on purpose: no view of the app renders italic today (there is no
 * font-style: italic, no <em> and no <i> in index.html, app.css or app.js), and Lora's italic is
 * a file of its own — the variable file above carries the upright weights only. The day a view
 * needs italic, fetch Lora's italic file into this folder and declare it with
 * font-style: italic; until then the browser has nothing to slant and nothing to fetch. */

/* ---------------------------------------------------------------- Inter (sans-serif) */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("Inter-Variable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("Inter-Variable.woff2") format("woff2");
}