/* Local Fonts - No External CDN Calls */

@layer theme, base, components, utilities;

/* =================================================
   UI FONTS: Using system font stack (instant load)
   Inter and Outfit REMOVED - no custom UI fonts
   ================================================= */

/* JetBrains Mono - Code Font (optional, low priority) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('/fonts/JetBrainsMono.woff2') format('woff2');
}

/* Material Symbols Rounded - Icons 
   Using 'block' to hide icons briefly until loaded (prevents garbled text)
   Max 3s block period, then shows fallback */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url('/fonts/MaterialSymbolsRounded.woff2') format('woff2');
}

/* The icon font's defaults sit in the `base` layer so a size or line-height class on an icon
   (text-xl, text-[18px], leading-none) still wins over them. This sheet is linked from index.html, not
   bundled, so an unlayered rule here beats every Tailwind 4 utility, which are all layered: icons
   rendered at 24px whatever their class said. The layer order is repeated from the app's CSS so it
   holds whichever sheet is read first. */
@layer base {
  .material-symbols-rounded {
    font-family: 'Material Symbols Rounded';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
}