/* ===========================================================================
   actual. — Typography tokens
   Arabic-first. Tajawal carries Arabic + Latin UI; Space Grotesk for the
   Latin wordmark / display accents; JetBrains Mono for code.
   =========================================================================== */

:root {
  /* --- Families ------------------------------------------------------- */
  --font-sans:    'Tajawal', 'Space Grotesk', system-ui, sans-serif;
  --font-display: 'Tajawal', 'Space Grotesk', system-ui, sans-serif;
  --font-latin:   'Space Grotesk', 'Tajawal', system-ui, sans-serif; /* wordmark, EN headings */
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* --- Type scale (rem) — tuned for Arabic x-height ------------------- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.8125rem;  /* 13 */
  --text-md:  0.9375rem;  /* 15 — base UI */
  --text-lg:  1.0625rem;  /* 17 */
  --text-xl:  1.25rem;    /* 20 */
  --text-2xl: 1.5rem;     /* 24 */
  --text-3xl: 1.875rem;   /* 30 */
  --text-4xl: 2.5rem;     /* 40 */
  --text-5xl: 3.25rem;    /* 52 */
  --text-6xl: 4.25rem;    /* 68 — hero */

  /* --- Weights -------------------------------------------------------- */
  --fw-light:    300; /* @kind font */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-heavy:    800; /* @kind font */
  --fw-black:    900; /* @kind font */

  /* --- Line heights --------------------------------------------------- */
  --lh-tight:   1.12; /* @kind font */
  --lh-snug:    1.28; /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.72; /* @kind font */ /* Arabic body reads better looser */

  /* --- Letter spacing (Latin only — never track Arabic) -------------- */
  --ls-tight:  -0.02em; /* @kind font */
  --ls-normal: 0;       /* @kind font */
  --ls-wide:   0.04em;  /* @kind font */
  --ls-caps:   0.12em;  /* @kind font */ /* eyebrow / overline labels */

  /* --- Semantic roles ------------------------------------------------- */
  --type-hero:     var(--fw-black) var(--text-6xl)/var(--lh-tight) var(--font-display);
  --type-display:  var(--fw-heavy) var(--text-4xl)/var(--lh-tight) var(--font-display);
  --type-title:    var(--fw-bold) var(--text-2xl)/var(--lh-snug) var(--font-display);
  --type-heading:  var(--fw-bold) var(--text-xl)/var(--lh-snug) var(--font-sans);
  --type-body:     var(--fw-regular) var(--text-md)/var(--lh-relaxed) var(--font-sans);
  --type-label:    var(--fw-medium) var(--text-sm)/var(--lh-normal) var(--font-sans);
  --type-caption:  var(--fw-regular) var(--text-xs)/var(--lh-normal) var(--font-sans);
  --type-mono:     var(--fw-regular) var(--text-sm)/var(--lh-normal) var(--font-mono);
}