/* =========================================================
   fonts.css (PRODUCTION / CLS-SAFE)
   - Local fonts only (no Google)
   - Prefer variable fonts to reduce files + avoid weight mistakes
   - Stable font selection via CSS variable --app-font
========================================================= */

/* ---------------------------
   1) Amiri (Arabic Serif) - static files
--------------------------- */
@font-face {
  font-family: 'Amiri';
  src: url('/fonts/Amiri/Amiri-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('/fonts/Amiri/Amiri-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('/fonts/Amiri/Amiri-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Amiri';
  src: url('/fonts/Amiri/Amiri-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------
   2) Cairo (Arabic Sans) - VARIABLE (أفضل)
   لديك: Cairo-VariableFont_slnt,wght.woff2
   ✅ يدعم مدى أوزان، يقلل ملفات كثيرة
--------------------------- */
@font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo/Cairo-VariableFont_slnt,wght.woff2') format('woff2');
  /* أغلب خطوط Cairo variable تكون 200..1000 (قد تختلف)
     وضع نطاق واسع آمن */
  font-weight: 200 1000;
  font-style: normal;
  font-display: swap;
}

/* (اختياري) لو عندك Cairo Italic variable — إذا ما موجود اتركه بدون */
 /* @font-face {
  font-family: 'Cairo';
  src: url('/fonts/Cairo/Cairo-Italic-VariableFont_slnt,wght.woff2') format('woff2');
  font-weight: 200 1000;
  font-style: italic;
  font-display: swap;
} */

/* ---------------------------
   3) Tajawal (Arabic Sans) - static essentials
   ✅ يكفي Regular + Bold للأداء
   (إذا تحتاج أوزان أكثر أضفها بنفس الطريقة)
--------------------------- */
@font-face {
  font-family: 'Tajawal';
  src: url('/fonts/Tajawal/Tajawal-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Tajawal';
  src: url('/fonts/Tajawal/Tajawal-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------------------------
   4) Inter (Latin) - VARIABLE (أفضل)
   لديك: Inter-VariableFont_opsz,wght.woff2 + italic variable
--------------------------- */
@font-face {
  font-family: 'inter';
  src: url('/fonts/inter/Inter-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'inter';
  src: url('/fonts/inter/Inter-Italic-VariableFont_opsz,wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------
   5) Exo 2 - VARIABLE (أفضل)
   لديك: Exo2-VariableFont_wght.woff2 + Italic variable
--------------------------- */
@font-face {
  font-family: 'Exo_2';
  src: url('/fonts/Exo_2/Exo2-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Exo_2';
  src: url('/fonts/Exo_2/Exo2-Italic-VariableFont_wght.woff2') format('woff2');
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------------------------
   6) Merriweather Sans - VARIABLE (أفضل)
   لديك: MerriweatherSans-VariableFont_wght.woff2 + Italic variable
--------------------------- */
@font-face {
  font-family: 'Merriweather_Sans';
  src: url('/fonts/Merriweather_Sans/MerriweatherSans-VariableFont_wght.woff2')
    format('woff2');
  font-weight: 300 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Merriweather_Sans';
  src: url('/fonts/Merriweather_Sans/MerriweatherSans-Italic-VariableFont_wght.woff2')
    format('woff2');
  font-weight: 300 800;
  font-style: italic;
  font-display: swap;
}

/* =========================================================
   ✅ FINAL CLS-SAFE FONT SELECTION LAYER
   - استخدم --app-font كـ single source of truth
   - fallback حسب html[lang] إذا JS تأخر/ما اشتغل
========================================================= */

:root {
  --app-font-latin: 'inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --app-font-ar: 'Tajawal', 'Cairo', 'Amiri', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;

  /* Default first paint */
  --app-font: var(--app-font-latin);
}

/* apply everywhere */
html, body { font-family: var(--app-font); }

/* fallback by lang */
html[lang="ar"] { --app-font: var(--app-font-ar); direction: rtl; }
html[lang="en"],
html[lang="fr"],
html[lang="de"],
html[lang="it"],
html[lang="tr"],
html[lang="zh"],
html[lang="ko"],
html[lang="ja"] { --app-font: var(--app-font-latin); direction: ltr; }

/* layout stability */
html {
  scrollbar-gutter: stable;
  text-size-adjust: 100%;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }