/* Fal — Typography. Arabic-first, RTL-native brand.
   Cairo  — geometric kufi display, echoes the bold logo wordmark → headings/UI.
   Tajawal — humanist Arabic sans, highly legible → body & long copy.
   Aref Ruqaa — traditional naskh, reserved for ceremonial / luxury accents.
   NOTE: exact logo lettering is a custom mark; Cairo is the nearest webfont
   substitute — see readme.md "Font substitution". */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;500;600;700;800;900&family=Tajawal:wght@300;400;500;700;800&family=Aref+Ruqaa:wght@400;700&display=swap');

:root {
  /* ---- Families ---- */
  --font-display: 'Cairo', 'Tajawal', 'Segoe UI', system-ui, sans-serif;
  --font-body:    'Tajawal', 'Cairo', 'Segoe UI', system-ui, sans-serif;
  --font-accent:  'Aref Ruqaa', 'Cairo', Georgia, serif;

  /* ---- Weights ---- */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;
  --weight-black: 900;

  /* ---- Type scale (1.250 major-third, 16px base) ---- */
  --text-2xs: 0.694rem;  /* 11px */
  --text-xs:  0.8rem;    /* 12.8px */
  --text-sm:  0.9rem;    /* 14.4px */
  --text-base: 1rem;     /* 16px */
  --text-md:  1.125rem;  /* 18px */
  --text-lg:  1.25rem;   /* 20px */
  --text-xl:  1.563rem;  /* 25px */
  --text-2xl: 1.953rem;  /* 31px */
  --text-3xl: 2.441rem;  /* 39px */
  --text-4xl: 3.052rem;  /* 49px */
  --text-5xl: 3.815rem;  /* 61px */

  /* ---- Line heights ---- */
  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.6;
  --leading-relaxed: 1.85;

  /* ---- Letter spacing (Arabic stays 0; latin caps get tracking) ---- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.12em;

  /* ---- Semantic roles ---- */
  --font-heading: var(--font-display);
  --font-text: var(--font-body);
}