/* ============================================================
   TYPOGRAPHY — Saudi Film Commission
   Primary: Effra (Dalton Maag). Brand hierarchy:
     Header        → Effra Heavy   (mapped to Bold 700 here)
     Sub-Header    → Effra Medium  (500)
     Bodycopy      → Effra Regular (400)
     Highlights    → Effra Bold    (700)
   Editorial display scale tuned for annual-report / dashboard use.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------ */
  --font-sans: "Effra", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-display: "Effra", "Segoe UI", system-ui, sans-serif;
  --font-arabic: "Effra", "Sakkal Majalla", "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace;

  /* ---- Weights ------------------------------------------- */
  --fw-light:   300; /* @kind other */
  --fw-regular: 400; /* @kind other */
  --fw-medium:  500; /* @kind other */
  --fw-bold:    700; /* @kind other */ /* stands in for Effra Heavy on headers */

  /* ---- Type scale (px → rem, editorial) ------------------ */
  --fs-display-xl: 5.25rem;  /* 84 — cover / hero numerals */
  --fs-display-l:  3.75rem;  /* 60 */
  --fs-display-m:  2.75rem;  /* 44 */
  --fs-h1:         2.125rem; /* 34 */
  --fs-h2:         1.625rem; /* 26 */
  --fs-h3:         1.25rem;  /* 20 */
  --fs-h4:         1.0625rem;/* 17 */
  --fs-body-lg:    1.125rem; /* 18 */
  --fs-body:       1rem;     /* 16 */
  --fs-body-sm:    0.875rem; /* 14 */
  --fs-caption:    0.8125rem;/* 13 */
  --fs-overline:   0.6875rem;/* 11 — labels / eyebrows */

  /* ---- Line heights -------------------------------------- */
  --lh-tight:   1.04; /* @kind other */
  --lh-snug:    1.18; /* @kind other */
  --lh-heading: 1.24; /* @kind other */
  --lh-body:    1.58; /* @kind other */
  --lh-relaxed: 1.7; /* @kind other */

  /* ---- Letter spacing ------------------------------------ */
  --ls-display:  -0.022em; /* @kind other */ /* tight optical for large display */
  --ls-heading:  -0.012em; /* @kind other */
  --ls-body:      0; /* @kind other */
  --ls-overline:  0.18em;  /* @kind other */ /* wide tracking for eyebrows/labels */
  --ls-tabular:   0.01em; /* @kind other */

  /* ---- Semantic roles ------------------------------------ */
  --text-display-weight: var(--fw-bold); /* @kind other */
  --text-heading-weight: var(--fw-medium); /* @kind other */
  --text-body-weight:    var(--fw-regular); /* @kind other */
  --text-label-weight:   var(--fw-bold); /* @kind other */
}