/* ===========================
   Arabic UI Typography (CSS)
   =========================== */

/* 1) استضافة محلية (مُفضّل للإنتاج):
   - ضع ملفات الخط (woff2/woff) داخل /fonts
   - غيّر أسماء الملفات حسب ملفاتك الفعلية.
   مثال هنا لخط "Cairo" متغير الوزن. */
@font-face {
  font-family: "Cairo VF";
  src:
    url("/fonts/Cairo[wght].woff2") format("woff2-variations"),
    url("/fonts/Cairo[wght].woff2") format("woff2");
  font-weight: 100 900;               /* أوزان متغيرة */
  font-style: normal;
  font-display: swap;                  /* لتفادي الوميض */
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; /* العربية */
}

/* خيار بديل: Google Fonts (سريع للتجربة)
   أنسخ السطر أدناه في  داخل HTML بدلاً من @font-face:
   
*/

/* 2) متغيرات الخط العربي */
:root {
  --font-arabic: "Cairo VF", "Cairo", "IBM Plex Sans Arabic", "Tajawal",
                 "Noto Kufi Arabic", "Noto Naskh Arabic",
                 "Geeza Pro", "Segoe UI", Tahoma, Arial, system-ui, sans-serif;
  --arabic-line-height: 1.9;
  --arabic-letter-spacing: 0.1px;
}

/* 3) تطبيق الخط تلقائيًا عندما اللغة عربية */
html[lang^="ar"],
:lang(ar) {
  font-family: var(--font-arabic);
  line-height: var(--arabic-line-height);
  letter-spacing: var(--arabic-letter-spacing);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 4) جعل الاتجاه RTL تلقائيًا حيث يلزم (اختياري) */
html[lang^="ar"] body,
:lang(ar) {
  direction: rtl;
}

/* 5) عناوين بأوزان أنسب للعربية */
:lang(ar) h1 { font-weight: 800; }
:lang(ar) h2 { font-weight: 700; }
:lang(ar) h3 { font-weight: 600; }
:lang(ar) h4, :lang(ar) h5, :lang(ar) h6 { font-weight: 600; }

/* 6) نصوص واجهة شائعة */
:lang(ar) button,
:lang(ar) input,
:lang(ar) select,
:lang(ar) textarea,
:lang(ar) .nav,
:lang(ar) .badge,
:lang(ar) .chip {
  font-family: var(--font-arabic);
  letter-spacing: 0; /* زرع الدقة في الرموز */
}

/* 7) معالجة الأرقام (اختياري):
   استخدم الأرقام العربية الهندية داخل مناطق معينة */
.arabic-digits {
  font-feature-set