/* cairo-font.css — self-hosted Cairo variable font (TTF)
   Place the font file at: /public/fonts/Cairo-VariableFont_slnt,wght.ttf
   Then include this CSS in your layout head:
   <link rel="stylesheet" href=\"{{ asset('css/cairo-font.css') }}\">
*/

@font-face{
  font-family: "Cairo";
  src: url("Cairo-VariableFont_slnt,wght.ttf") format("truetype");
  font-weight: 200 1000; /* variable weight range */
  font-style: normal;
  font-display: swap; /* avoid invisible text during load */
}

:root,
[data-bs-theme="light"],
[data-bs-theme="dark"]{
  --bs-font-sans-serif: "Cairo";
  --bs-body-font-family: "Cairo";
}


/* بدّل هذه القاعدة إن كانت موجودة */
html, body { font-family: "Cairo", sans-serif; }


/* استثناءات للأيقونات */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important; /* للـ .fas */
}
.far { font-weight: 400 !important; }
.fab { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }


/* Optional: preload hint (paste in your Blade layout head)
<link rel="preload" as="font" href="{{ asset('fonts/Cairo-VariableFont_slnt,wght.ttf') }}" type="font/ttf" crossorigin>
*/