:root {
  --llamas-ui-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-family: var(--llamas-ui-font);
}

/* Match Header's System stack in HTML, React Native and body portals.
   Keep icon glyphs and technical snippets in their own font families. */
@layer llamas-typography {
  body, #root,
  body :where(*):not(:where(
    [style*="ionicons" i], [style*="material" i], [style*="fontawesome" i],
    [style*="feather" i], [style*="anticon" i], [style*="entypo" i],
    [style*="evilicons" i], [style*="fontisto" i], [style*="foundation" i],
    [style*="octicons" i], [style*="simple-line-icons" i], [style*="zocial" i],
    code, code *, pre, pre *, kbd, samp
  )) {
    font-family: var(--llamas-ui-font) !important;
  }
}