/* karaa-web/public/fonts.css
 * Self-hosted webfonts — no external CDN (Google Fonts dropped for privacy +
 * offline + no render-blocking third-party request). Files live in /fonts/.
 *   English  -> Inter                 (latin subset, weights 400-800)
 *   Arabic   -> IBM Plex Sans Arabic  (arabic subset, weights 400-700; also
 *              carries Latin glyphs, so it renders numerals/product names on
 *              AR pages without a Latin fallback swap)
 * font-display: swap — system font paints immediately, webfont swaps in. */

/* ── Inter (English) ─────────────────────────────────────────────────────── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/inter-400.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/inter-500.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/inter-600.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/inter-700.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/fonts/inter-800.woff2") format("woff2");
}

/* ── IBM Plex Sans Arabic (Arabic) ───────────────────────────────────────── */
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ibmplexsansarabic-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ibmplexsansarabic-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ibmplexsansarabic-600.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Sans Arabic";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/ibmplexsansarabic-700.woff2") format("woff2");
}

/* The per-language font STACKS live in karaa-brand.css (--font-family) and
   karaa-tokens.css (--font-family-base/heading/display + the html[lang=ar]
   override): those files already own the font tokens and one carries
   !important, so repointing them there avoids a cascade fight. This file only
   declares the faces. English = Inter, Arabic = IBM Plex Sans Arabic; each
   stack keeps the other as fallback for mixed-script runs. */