/* ============================================================
   PFL DESIGN SYSTEM · GLOBAL ENTRY
   Consumers link this single file. Import order matters:
   fonts → tokens → typography helpers.
   ============================================================ */
@import "tokens/fonts.css";
@import "tokens/colors.css";
@import "tokens/typography.css";
@import "tokens/spacing.css";

/* ============================================================
   Fighter portrait framing
   ----------------------------------------------------------------
   pflmma.com bodyshots (sourced via the photo-backfill scraper)
   and admin-uploaded headshots (served via /api/roster/:slug/photo)
   are tall portraits with the head at the top and the body filling
   the rest of the frame. The DS Avatar component's <img> sets
   object-fit: cover but no object-position, so the default
   center-center crop lands mid-chest — admins flagged this on the
   roster cards (champions' belts visible, faces partially cut).
   Pinning these specific sources to top-center anchors the crop on
   the face. Other images (flagcdn flags, brand icons) untouched.
   ============================================================ */
/* Match patterns:
   • pflmma.com — entire host. Every img from this origin is a fighter
     portrait (the design system's own assets are on the SWA host, not
     pflmma.com, so there's no false positive risk).
   • /fighters/bodyshots/ — the canonical bodyshot path captured by the
     pfl-roster.ts regex. Belt-and-braces in case the hostname is ever
     CDN-fronted (e.g. cdn.pflmma.com) which the pflmma.com selector
     would miss.
   • /api/roster/:slug/photo — admin-uploaded headshots served via our
     stable redirect route. */
img[src*="pflmma.com"],
img[src*="/fighters/bodyshots/"],
img[src*="/api/roster/"][src*="/photo"] {
  object-position: top center !important;
}