/* Self-hosted web fonts for the marketing landing page — and nothing else.
 *
 * Why self-hosted: the landing page ships `Content-Security-Policy: style-src 'self'` with no
 * `font-src` exception, so a stylesheet from fonts.googleapis.com and font files from
 * fonts.gstatic.com are both blocked. Everything below is served from our own origin. Same reason
 * the board already vendors Kannada and Tamil — see `public/shared/fonts/NOTICE.md`.
 *
 * Loaded by the landing page only (`<link rel="stylesheet" href="/landing/fonts/fonts.css">`).
 * No app SPA links it: the admin, board, mobile and teller apps get their script fonts at runtime
 * from `public/shared/fonts.js`, and the two Noto faces here deliberately reuse that file's family
 * names and weight ranges so the CSS-declared face and the JS-added FontFace are the same font to
 * the browser and can never disagree.
 *
 * Files, licences, subsets kept and fetch date: `NOTICE.md` in this directory.
 * All `src` URLs are relative to this file (`public/landing/fonts/`).
 */

/* ---------------------------------------------------------------- Bricolage Grotesque (OFL)
 * The page's one Latin family. Variable on three axes — opsz 12..96, wdth 75..100, wght 200..800 —
 * which the design uses: `font-optical-sizing: auto` on the H1, wdth 90 on the ticket numerals.
 * `unicode-range` is copied verbatim from Google's css2 response, so a page with no latin-ext
 * character never fetches the latin-ext file. The vietnamese face was dropped.
 */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(bricolage-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;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url(bricolage-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;
}

/* ---------------------------------------------------------------- Noto Sans Devanagari (OFL)
 * Hindi. The devanagari subset only: Google serves a separate latin and latin-ext face for this
 * family and Bricolage already covers those, so a Hindi page draws its Latin runs in the brand
 * face rather than in Noto. Weight range and `font-stretch` are what Google declares for this
 * family — it has a wght axis of 400..800 and no usable width axis, so claiming `75% 100%` here
 * would only invite the browser to synthesise a condensed it does not have.
 */
@font-face {
  font-family: "Noto Sans Devanagari";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url(noto-devanagari.woff2) format('woff2');
  unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09;
}

/* ---------------------------------------------------------------- Kannada and Tamil (OFL)
 * The files the apps already vendor, reused rather than fetched again. Family names, weight range
 * (400 700 — regular and bold, bolder is synthesised) and `unicode-range` are copied from
 * `public/shared/fonts.js` so the two declarations describe one font.
 *
 * NOTE for whoever builds the language switcher: `unicode-range` makes a browser fetch a face as
 * soon as one matching character is on the page. The switcher lists all ten languages by their
 * native name, so a `ಕನ್ನಡ` or `தமிழ்` label in the markup pulls these two files (141 KB) on
 * *every* language of the page, English included. That is the exact cost `shared/fonts.js` exists
 * to avoid. If the switcher renders native names, draw those two labels from a `<select>` or swap
 * them for transliterations, or the Latin font budget is gone.
 */
@font-face {
  font-family: "Noto Sans Kannada";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../shared/fonts/NotoSansKannada.woff2) format('woff2');
  unicode-range: U+0951-0952, U+0964-0965, U+0C80-0CF3, U+1CD0, U+1CD2-1CD3, U+1CDA, U+1CF2, U+1CF4, U+200C-200D, U+20B9, U+25CC, U+A830-A835;
}

@font-face {
  font-family: "Noto Sans Tamil";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../../shared/fonts/NotoSansTamil.woff2) format('woff2');
  unicode-range: U+0964-0965, U+0B82-0BFA, U+200C-200D, U+20B9, U+25CC;
}

/* ---------------------------------------------------------------- size-adjusted fallback
 * Arial, stretched to Bricolage's proportions, so the swap at `font-display: swap` moves nothing.
 *
 * Measured in headless Chrome by laying out real copy on a real served page at the sizes this page
 * uses (scratchpad `measure-final.mjs`). Rendered advance of the same text, Bricolage / Arial:
 *
 *              14px/400   17px/400   21px/400  |  24px/650   56px/700   92px/750
 *   sentence    1.0445     1.0408     1.0352   |   0.9973     0.9628     0.9222
 *   paragraph   1.0515     1.0477     1.0420   |   0.9952     0.9604     0.9199
 *
 * Bricolage is *wider* than Arial through the body range and narrower at heading weights, because
 * its optical-size axis tightens it as it grows and its heavy weights are more condensed than
 * Arial's synthesised bold. One number has to serve, so it is set for body copy — where nearly all
 * the text is, and where a reflow costs the most: size-adjust 104.5%, the mean of the six
 * body-range figures, which leaves every one of them inside 0.7%. The trade is at the top end,
 * where the fallback sets wide — about 5% at the 24px H3, 9% at the 56px H2 and 14% at the 92px
 * H1. Headings are few, short and `text-wrap: balance`d, so this costs a re-wrap, not a reflow of
 * the page; if it ever shows, the answer is a second fallback face tuned for the display sizes.
 *
 * Vertical, in ems of the real font: ascent 0.930, descent 0.270, `line-height: normal` box 1.200
 * — which is exactly ascent + descent, so there is no line gap to restore. Each override is the
 * metric divided by the size-adjust, because a declared override resolves against the em *after*
 * size-adjust has scaled it: 0.930/1.045 = 89.0%, 0.270/1.045 = 25.8%, gap 0%. They sum back to
 * (0.890 + 0.258) x 1.045 = 1.200em, the real font's line box.
 *
 * Two traps worth leaving written down, since both produced confident wrong numbers here:
 *   - `document.fonts.check()` returns true for a face that is loaded but not actually rendering,
 *     and a document built through CDP `Page.setDocumentContent` does not render the webfont at
 *     all. Measure on a page fetched over HTTP, and assert the result differs from the default
 *     serif before believing it.
 *   - measuring the advance on a canvas at one huge font-size reads the wrong end of the opsz
 *     axis. Measure at the size the text will really be set in.
 *
 * The `src` names four fonts, not one. `local()` matches on the font's own name and does not follow
 * fontconfig's aliases, so `local("Arial")` alone resolves to nothing on a Linux desktop — the face
 * errors, the stack falls through to the next family, and the size-adjust does nothing at all. That
 * is how this was caught: our own headless-Chrome box has no Arial. Helvetica, Liberation Sans and
 * Arimo are metric-compatible with Arial by design (identical advance widths), so the numbers above
 * hold whichever one answers: Arial on Windows and macOS, Helvetica on older macOS, Liberation Sans
 * or Arimo on Linux.
 */
@font-face {
  font-family: "Bricolage Fallback";
  font-style: normal;
  font-weight: 200 800;
  src: local("Arial"), local("Helvetica"), local("Liberation Sans"), local("Arimo");
  size-adjust: 104.5%;
  ascent-override: 89.0%;
  descent-override: 25.8%;
  line-gap-override: 0%;
}

/* ---------------------------------------------------------------- stacks
 * One custom property, overridden per language on <html lang>. Headings and body share it.
 */
:root {
  --font-sans: "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[lang="hi"] {
  --font-sans: "Noto Sans Devanagari", "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[lang="kn"] {
  --font-sans: "Noto Sans Kannada", "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[lang="ta"] {
  --font-sans: "Noto Sans Tamil", "Bricolage Grotesque", "Bricolage Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

html[lang="ja"] {
  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", "Noto Sans CJK JP", sans-serif;
}