/* ═══════════════════════════════════════════════════════ */
/* Mal Design System — the type face                      */
/*                                                         */
/* Inter, self-hosted. One face for the whole product:     */
/* Latin and Arabic both set in it.                        */
/* ═══════════════════════════════════════════════════════ */

/* WHY SELF-HOSTED
 *
 * This used to be a <link> to fonts.googleapis.com on every page. Three costs,
 * all paid before the first paint: a DNS lookup and TLS handshake to a third
 * party, a stylesheet that blocks rendering while it arrives, and a prototype
 * that shows Helvetica on a plane or a locked-down network. Two files in the
 * repo cost none of that, and a prototype opened from a file:// URL now looks
 * the same as one on Netlify.
 *
 * ONE FILE PER SUBSET, NOT PER WEIGHT. Google serves Inter as a variable font,
 * so the woff2 behind wght@400, 500 and 600 is byte-identical — the same file
 * downloaded three times under three names. `font-weight: 100 900` below says
 * that once: any weight in the range comes out of the one file, and asking for
 * a weight the DS does not use costs nothing extra.
 *
 * The unicode-range pairs are Google's own. They are what keeps latin-ext
 * (85KB) off the wire until a glyph on the page actually needs it, so an
 * English screen downloads 48KB and nothing more.
 *
 * To refresh: re-download the two URLs from
 *   https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap
 * fetched with a modern browser User-Agent, and keep the ranges in step.
 */

/* latin — the common case. Everything a Mal screen sets in English. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../art/fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext — accented names, extra currency marks. Fetched only on demand. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../art/fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ARABIC
 *
 * There is no Arabic @font-face here, and that is not an omission. Inter ships
 * no Arabic glyphs — Google serves it in seven subsets (latin, latin-ext,
 * cyrillic, cyrillic-ext, greek, greek-ext, vietnamese) and none of them is
 * Arabic. So an Arabic string in a stack that starts with Inter falls through,
 * per glyph, to the next family that HAS the glyph. That is why every Arabic
 * rule in components.css names Inter first and then the platform Arabic faces:
 * the Latin inside an Arabic line — numerals, a brand name — comes out in Inter,
 * and the Arabic itself comes out in the platform face.
 */