/*
 * Static ProximaNova @font-face declarations.
 *
 * Why: the @helloself/hello-self-ui package declares these via a styled-components
 * createGlobalStyle (<GlobalFonts />), so the browser only discovers the fonts after
 * React mounts. On slow parses (dev, cold prod load), text renders in Arial/Times first
 * and reflows when ProximaNova arrives, making font sizes appear to "jump."
 *
 * Declaring the same @font-face rules here, linked directly from index.html, lets the
 * browser discover and fetch the fonts during HTML parsing — before the JS bundle runs.
 * font-display: swap keeps text visible while loading.
 *
 * Keep this in sync with node_modules/@helloself/hello-self-ui/dist/index.esm.js
 * (the GlobalFonts createGlobalStyle block) when the UI library updates its fonts.
 */

@font-face {
    font-family: 'ProximaNova';
    src: url('./ProximaNova-Regular.woff2') format('woff2'),
         url('./ProximaNova-Regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('./ProximaNova-SemiBold.woff2') format('woff2'),
         url('./ProximaNova-SemiBold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ProximaNova';
    src: url('./ProximaNova-Bold.woff2') format('woff2'),
         url('./ProximaNova-Bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}