/*
 * NFN webfont imports — v1 (Warm direction, locked 2026-04-30)
 *
 * Hand-written file (NOT generated by Style Dictionary). Lives alongside
 * tokens.{theme}.css so consumers can <link> them together with predictable
 * paths — e.g. CXO and the showcase both pull this from build/css/.
 *
 *   <link rel="stylesheet" href="build/css/fonts.css">
 *   <link rel="stylesheet" href="build/css/tokens.dark.css">
 *
 * Stack:
 *   Onest          — variable wght 100–900, sans
 *   IBM Plex Mono  — discrete weights 400/500/600/700 (ital@400), mono
 *   Phosphor       — six discrete weight files; v1 loads Regular only
 *
 * v1 uses CDN delivery (Google Fonts + jsdelivr). v1.5 self-hosts WOFF2.
 */

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css');

/*
 * Icon utility — apply `nfn-icon` alongside Phosphor's own classes.
 *
 *   <i class="nfn-icon ph ph-magnifying-glass"></i>
 *   <i class="nfn-icon nfn-icon--lg ph ph-gear"></i>
 *
 * The `ph` and `ph-*` classes come from Phosphor's loaded stylesheet above.
 * This file adds size variants tied to the iconSize tokens.
 *
 * For non-regular weights, load the additional Phosphor stylesheets:
 *   https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/{thin,light,bold,fill,duotone}/style.css
 * Then use:
 *   <i class="nfn-icon ph-bold ph-warning"></i>
 *   <i class="nfn-icon ph-fill ph-heart"></i>
 */
.nfn-icon {
  display: inline-block;
  line-height: 1;
  vertical-align: middle;
  color: inherit;
  font-size: var(--nfn-icon-size-md, 20px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nfn-icon--sm { font-size: var(--nfn-icon-size-sm, 16px); }
.nfn-icon--md { font-size: var(--nfn-icon-size-md, 20px); }
.nfn-icon--lg { font-size: var(--nfn-icon-size-lg, 24px); }
.nfn-icon--xl { font-size: var(--nfn-icon-size-xl, 32px); }