/*
  icons.css — Upfluence canonical icon layer.

  KB canon: the icon system is Font Awesome 7 Pro, and the DEFAULT product weight is
  REGULAR (400) — the "1.0 Icon regular" spec. This file makes Regular the default and
  is the ONE stylesheet every card / UI-kit / preview links for icons.

  The @import below supplies FA's class→glyph mappings (.fa-<name>::before { content }).
  Every icon FACE is then re-declared here with ABSOLUTE urls (the @import's own webfont
  urls are relative and don't resolve in every sandbox), so all three styles always render.

  Resolution order for a UI icon (weight 400):
    1. "Font Awesome 7 Pro" — licensed Regular-400 OTF, loaded LOCALLY. Drop the file at
       assets/iconfont/fa7-pro-regular-400.otf and every icon renders in true FA7 Pro Regular.
    2. "UPF FA Regular"     — CDN Regular face (the free Regular subset) for dev.
    3. "UPF FA Solid"       — CDN Solid face; guarantees EVERY glyph renders even when absent
                              from the free Regular subset (degrades to solid in dev only).

  Genuine solid marks (e.g. a FILLED rating star) keep `fa-solid` → true Solid, untouched.
  Social/brand glyphs keep `fa-brands` → FA Brands.

  ✓ SHIPPED: the licensed FA7 Pro Regular OTF is present at assets/iconfont/fa7-pro-regular-400.otf,
  so every UI icon renders in true FA7 Pro Regular. The CDN faces below remain only as a fallback
  chain for sandboxes where the local OTF fails to load.
*/

@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");
@import url("./fa-mappings.css"); /* self-hosted glyph map — keeps icons alive when the CDN is unreachable. Add every new icon name here. */

/* Canonical face — licensed FA7 Pro Regular (local; drop the OTF in to activate). */
@font-face {
  font-family: "Font Awesome 7 Pro";
  font-weight: 400; font-style: normal; font-display: block;
  src: url("./fa7-pro-regular-400.otf") format("opentype");
}
/* Dev faces — absolute urls so they always resolve. */
@font-face {
  font-family: "UPF FA Regular";
  font-weight: 400; font-style: normal; font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-regular-400.woff2") format("woff2");
}
@font-face {
  font-family: "UPF FA Solid";
  font-weight: 900; font-style: normal; font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "UPF FA Brands";
  font-weight: 400; font-style: normal; font-display: block;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/webfonts/fa-brands-400.woff2") format("woff2");
}

/* Default = REGULAR (Pro → free-regular → solid fallback). */
.fa-regular, .far,
i.fa:not(.fa-solid):not(.fas):not(.fa-brands):not(.fab) {
  font-family: "Font Awesome 7 Pro", "UPF FA Regular", "UPF FA Solid" !important;
  font-weight: 400 !important;
}
/* Intentional solid marks (filled stars, etc.) — always true Solid. */
.fa-solid, .fas {
  font-family: "UPF FA Solid" !important;
  font-weight: 900 !important;
}
/* Brand / social glyphs. */
.fa-brands, .fab {
  font-family: "UPF FA Brands" !important;
  font-weight: 400 !important;
}

/* ── Default icon size ──────────────────────────────────────────────
   Every icon renders at 12px (Icon Size/xs) by DEFAULT, system-wide.
   Components that need a larger, purpose-built glyph (icon-only buttons,
   badges, illustrations, size-variant marks, the tiny Tag glyph) re-assert
   their size with a higher-specificity `!important` rule on the <i>. */
.fa-regular, .far, .fa-solid, .fas, .fa-brands, .fab,
i.fa:not(.fa-solid):not(.fas):not(.fa-brands):not(.fab) {
  font-size: var(--icon-size-xs, 12px) !important;
}