/* 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. */

/* ── Material Icons (icon glyphs) ─────────────────────────────────────────────
 * Self-hosted to finish the policy in this file's header: index.html used to
 * pull these two from fonts.googleapis.com, which was the last external CDN
 * dependency and the only thing violating the site's CSP
 * (style-src 'self' / font-src 'self' data:). Serving them from /fonts/ keeps
 * the policy tight instead of widening it for a third party.
 *
 * font-display: block (not swap) — an icon font has no readable fallback: a
 * swap would paint raw ligature text like "search"/"favorite" before the glyphs
 * arrive. block keeps the box invisible briefly, then draws the icon.
 * Sources: Material Icons v145 / Material Icons Outlined v110. */
@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-icons-400.woff2") format("woff2");
}
@font-face {
  font-family: "Material Icons Outlined";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-icons-outlined-400.woff2") format("woff2");
}