/* ============================================================
   LAYTH & LAYAN — Self-hosted fonts
   ============================================================
   Four fonts cover the entire site:
     - Fredoka One   (display titles, hero headings)
     - Baloo 2       (eyebrow pills, UI labels, buttons)
     - Nunito        (body text, prose, form fields, italic accents)
     - Amiri         (Arabic serif — dua pages only, auto-loaded
                      via unicode-range when Arabic chars present)

   font-display strategy:
     - 'swap' for display fonts (Fredoka One, Baloo 2, Amiri):
       show the fallback first, swap to the webfont when ready.
       Title flash is acceptable; missing titles are not.
     - 'optional' for body Nunito: if the font isn't ready in
       ~100ms, browser uses fallback and DOESN'T swap later.
       This prevents the "text reflows mid-read" effect (FOIT/FOUT)
       which is more disruptive for body text than a brief mismatch.

   Fallback stacks include 'system-ui' first so the FOUC moment
   uses the user's native UI font (San Francisco on Mac, Segoe on
   Windows, Roboto on Android). These look reasonably similar to
   our webfonts and don't trigger awkward serif fallbacks.
   ============================================================ */

/* ===== FREDOKA ONE — display headings ===== */
@font-face {
  font-family: 'Fredoka One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/fredoka-one-400.woff2') format('woff2');
}

/* ===== BALOO 2 — eyebrows, UI labels ===== */
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/baloo-2-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/baloo-2-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/baloo-2-800.woff2') format('woff2');
}

/* ===== NUNITO — body text & prose =====
   font-display: optional means the browser shows the fallback
   instantly and only loads Nunito if it can be fetched in time
   to use without reflow. After first page load, Nunito will be
   cached and used everywhere. */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/nunito-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: url('/fonts/nunito-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: optional;
  src: url('/fonts/nunito-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/nunito-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 800;
  font-display: optional;
  src: url('/fonts/nunito-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 900;
  font-display: optional;
  src: url('/fonts/nunito-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 400;
  font-display: optional;
  src: url('/fonts/nunito-400-italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Nunito';
  font-style: italic;
  font-weight: 700;
  font-display: optional;
  src: url('/fonts/nunito-700-italic.woff2') format('woff2');
}

/* ===== AMIRI — Arabic serif (dua pages only) =====
   Amiri is a high-quality Arabic typeface designed for Quranic-style
   text. We self-host the Regular weight only — dua text is body
   weight, no bolding needed.

   font-display: swap so dua text renders immediately in the system
   serif fallback, then upgrades to Amiri when ready. Better than
   'optional' here because Arabic system fonts vary wildly across
   OSes and we want to guarantee the upgrade happens.

   unicode-range: critical for performance. Browsers ONLY download
   this font when the page contains characters in these ranges. The
   ranges below cover:
     U+0020-007E  basic Latin (numbers, punctuation in Arabic text)
     U+0600-06FF  Arabic
     U+0750-077F  Arabic Supplement
     U+08A0-08FF  Arabic Extended-A
     U+FB50-FDFF  Arabic Presentation Forms-A (joining/decorative)
     U+FE70-FEFF  Arabic Presentation Forms-B (ligatures, isolated)

   Result: homepage, hub, games, etc. never download Amiri (no Arabic
   characters present). Dua pages load it automatically because they
   contain Arabic text. Zero work in HTML; the unicode-range filter
   does it all. */
@font-face {
  font-family: 'Amiri';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/Amiri-Regular.woff2') format('woff2');
  unicode-range: U+0020-007E, U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF;
}