/* ---------------------------------------------------------------------------
   Sakkal Majalla — the client's house typeface, used across the UI, the
   printed forms and the reports.

   It is a licensed Microsoft face that ships with Windows and Office, so the
   file cannot be redistributed with the app. Two things happen here:

     1. The @font-face blocks resolve the font from the machine it is
        already installed on, so any Windows or Office machine — which is
        what the client's staff use — renders in Sakkal Majalla with no
        font file shipped at all.
     2. To cover Mac, Linux and mobile too, drop a licensed
        SakkalMajalla.woff2 (and -Bold) into static/fonts/ and extend the
        src lists below to reference them. They are named only by local()
        for now: collectstatic resolves every file reference it finds in a
        stylesheet and fails the build on one that is not there yet.

   Cairo and IBM Plex Sans Arabic stay on as fallbacks so Arabic never drops
   to a system serif.
   --------------------------------------------------------------------------- */
@font-face {
  font-family: "Sakkal Majalla Web";
  src: local("Sakkal Majalla"), local("Majalla UI"), local("MajallaUI");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Sakkal Majalla Web";
  src: local("Sakkal Majalla Bold"), local("Majalla UI Bold");
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-sakkal: "Sakkal Majalla Web", "Sakkal Majalla", "Majalla UI";
  --font-family-primary: var(--font-sakkal), "Cairo", "IBM Plex Sans Arabic",
                         system-ui, sans-serif;
  --font-family-heading: var(--font-sakkal), "Cairo", "IBM Plex Sans Arabic",
                         system-ui, sans-serif;
  --font-family-primary-loaded: var(--font-sakkal);
  --font-family-heading-loaded: var(--font-sakkal);
}

/* Sakkal Majalla sits small on the line compared with Cairo, so nudge the
   base size and leading up a touch to keep the layouts even. */
body, button, input, select, textarea, table, .card, .page {
  font-family: var(--font-family-primary);
}
h1, h2, h3, h4, h5, h6,
.page-title, .card-title, .kpi-value, .portal-kpi-value {
  font-family: var(--font-family-heading);
}
body { font-size: 15px; line-height: 1.75; }

/* Printed output — forms, certificates, payslips and reports. */
@media print {
  body, .certificate, .document-letter, .emp-card, table {
    font-family: var(--font-family-primary) !important;
  }
}