/* File: wwwroot/fonts/fonts.css
   Purpose: Self-hosted webfonts for the LSH Portal. Replaces the two <link>s to
            fonts.googleapis.com that index.html carried, plus their two preconnect hints. Both sat
            in <head> and are render-blocking. Measured on IPMS, which carried the identical
            Material Symbols URL: aborting the font requests alone took a page's `load` event from
            7,415 ms to 349 ms. That URL's icon file is 3.98 MB, because it asks for the FULL
            variable axis range (opsz 20..48, wght 100..700, FILL 0..1, GRAD -50..200) while nothing
            in the Portal varies a single axis.
   Owner: Yoza Wiratama
   Created: 2026-09-14
   Part of: LSH Ecosystem — LSH Portal

   This matters more here than anywhere else: the Portal is the front door every LSH user opens
   first, and it was measured at `load` 3,089 ms with domInteractive 2,948 ms.

   Files here are the exact bytes Google serves, downloaded once and committed:
     inter-latin.woff2                48,256 B   Inter variable, wght 400-700, latin
     inter-latin-ext.woff2            85,068 B   same, latin-ext
     material-symbols-outlined.woff2 330,416 B   STATIC instance @ opsz 20, wght 400, FILL 0, GRAD 0

   Why opsz 20. CSS `font-optical-sizing` defaults to `auto`, so with the variable font the browser
   picked opsz from each icon's font-size, clamped into the 20..48 axis. app.tailwind.css renders
   icons at 18px, 20px and 22px — at or below the axis floor — so 20 is the grade in force today.
   Baking 24 would have quietly shifted every glyph's optical grade. Nothing here sets
   font-variation-settings, so there is no explicit request to honour instead (checked — NOT true at the
   time: some markup asked for 'FILL' 1, see the next paragraph).

   Outline only (PB-015, 2026-10-06). The file is a static FILL 0 / wght 400 instance, so
   font-variation-settings is IGNORED: markup that asked for 'FILL' 1 (and the tile icons' wght 500) has
   rendered outlined since the self-hosting, and that has been the Portal's look for weeks. A FILL 1
   instance of the same glyph set measures 406,508 B (Google Fonts, opsz 20, 2026-10-06) and the topbar
   module icon would load it on EVERY page, more than the whole outline file, so the Portal's icon
   language is outline and the dead requests were removed. A solid icon is drawn as an inline SVG
   instead (the pinned star in LauncherAppCard.razor). IconFontFillTests fails if markup asks for
   font-variation-settings again.

   Licences: Inter = SIL Open Font License 1.1. Material Symbols = Apache License 2.0. Both permit
   self-hosting and redistribution.

   This also lines the Portal up with its own CSP posture — index.html already notes that Drawflow
   is "self-hosted per portal CSP", while the fonts were still crossing to Google.

   The five other Inter subsets Google serves (cyrillic, cyrillic-ext, greek, greek-ext,
   vietnamese) are deliberately NOT shipped. To add a script later, add its subset file AND its own
   unicode-range block — never widen an existing one, which makes a file claim glyphs it has not
   got and suppresses the browser's fallback. */

/* ---------- Inter (body text) ---------- */
/* One @font-face per subset, not one per weight: this is a variable font, so a single file covers
   the whole 400-700 range the old URL asked for. */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('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;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('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;
}

/* ---------- Material Symbols Outlined (icons) ---------- */
/* block, not the swap the old URL asked for: icon glyphs are addressed by ligature, so the fallback
   face renders the ligature's SOURCE TEXT — a swap flashes literal words like "chevron_right" and
   "notifications" into the topbar. Same-origin now, so it resolves long before block's ~3 s limit. */

@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('material-symbols-outlined.woff2') format('woff2');
}

/* Base utility class, carried over verbatim from the stylesheet Google used to serve. It has to
   live here: app.tailwind.css only ever OVERRIDES .material-symbols-outlined inside a context
   (.topbar-icon-btn 22px, .topbar-dd-icon 18px, the theme swatches' colours …) and never declares
   the family or the ligature feature itself. This file is linked where Google's <link>s sat —
   ABOVE css/app.tailwind.output.css — so those per-context rules keep winning exactly as today. */

.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}