/* =============================================================
   Self-hosted assets for Al-Bayan (fonts + motif)
   -------------------------------------------------------------
   Loaded by public/index.html via a <link> tag so webpack never
   inspects the URLs here.

   The three Arabic display faces below (Palestine, Ko Methlama,
   Thuluth) are optional. We only resolve them from the local
   system — if the user has them installed (common on macOS Arabic
   typographers), they will be used when selected in the font
   picker; otherwise the picker's font stack falls through to
   Aref Ruqaa / Amiri / Noto Naskh Arabic (loaded from Google
   Fonts in index.html).

   We do NOT reference url('/fonts/...') files here: CRA's SPA
   fallback serves index.html for any missing static asset, which
   the browser then tries to parse as a font and logs confusing
   "invalid sfntVersion" errors. To enable a file-based face,
   drop the file in /public/fonts/ and add the appropriate src
   entries manually.
   ============================================================= */

@font-face {
  font-family: 'Palestine';
  src: local('Palestine'), local('Palestine Regular');
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

@font-face {
  font-family: 'Ko Methlama';
  src: local('Ko Methlama');
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

@font-face {
  font-family: 'Thuluth Alsmt7017';
  src: local('Thuluth Alsmt7017'), local('Thuluth Alsmt');
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF, U+200C-200E;
}

/* PLAN1 §J.4 — dyslexia-friendly option. Falls through to system/local
   if the CDN is unreachable; safe offline behaviour. */
@font-face {
  font-family: 'OpenDyslexic';
  src: local('OpenDyslexic'),
       url('https://cdn.jsdelivr.net/npm/@fontsource/opendyslexic@5.0.0/files/opendyslexic-latin-400-normal.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

/* ---- Zellige motif URL variable ------------------------------
   Keeping this in public/ so webpack doesn't try to inline the
   SVG. The motif itself is themed via mask-image in index.css. */

:root {
  --motif-url: url('/motifs/zellige.svg');
}