/* ============================================================
   Marsa Foundation — Typography
   Display & UI: Isidora Sans Alt (geometric, rounded grotesque).
     Black (900) for hero/display, Bold (700) for headings & UI,
     Medium (500) for body. Negative tracking on large display.
   Arabic / RTL: Cairo.  Micro-labels / credits: Space Mono.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Isidora Sans Alt', 'Trebuchet MS', system-ui, sans-serif;
  --font-sans: 'Isidora Sans Alt', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-arabic: 'Cairo', 'Isidora Sans Alt', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* ---- Weights (only these three master weights exist) ---- */
  --weight-body: 500;
  --weight-strong: 700;
  --weight-display: 900;

  /* ---- Type scale (px) ---- */
  --fs-display-xl: 76px;
  --fs-display-l: 58px;
  --fs-display-m: 44px;
  --fs-h1: 36px;
  --fs-h2: 28px;
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-l: 19px;
  --fs-body: 16px;
  --fs-body-s: 14px;
  --fs-caption: 13px;
  --fs-micro: 11px;

  /* ---- Line heights ---- */
  --lh-tight: 1.02; /* @kind other */
  --lh-display: 1.06; /* @kind other */
  --lh-heading: 1.16; /* @kind other */
  --lh-snug: 1.35; /* @kind other */
  --lh-body: 1.6; /* @kind other */
  --lh-relaxed: 1.75; /* @kind other */

  /* ---- Tracking ---- */
  --tracking-display: -0.02em;
  --tracking-heading: -0.01em;
  --tracking-normal: 0;
  --tracking-label: 0.14em;   /* mono eyebrows, all-caps */
  --tracking-wide: 0.04em;
}

/* ---- Reusable type roles ---- */
.t-display-xl { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-display-xl); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-display-l { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-display-l); line-height: var(--lh-display); letter-spacing: var(--tracking-display); }
.t-display-m { font-family: var(--font-display); font-weight: var(--weight-display);
  font-size: var(--fs-display-m); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.t-h1 { font-family: var(--font-sans); font-weight: var(--weight-strong);
  font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.t-h2 { font-family: var(--font-sans); font-weight: var(--weight-strong);
  font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--tracking-heading); }
.t-h3 { font-family: var(--font-sans); font-weight: var(--weight-strong);
  font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4 { font-family: var(--font-sans); font-weight: var(--weight-strong);
  font-size: var(--fs-h4); line-height: var(--lh-snug); }
.t-body-l { font-family: var(--font-sans); font-weight: var(--weight-body);
  font-size: var(--fs-body-l); line-height: var(--lh-relaxed); }
.t-body { font-family: var(--font-sans); font-weight: var(--weight-body);
  font-size: var(--fs-body); line-height: var(--lh-body); }
.t-body-s { font-family: var(--font-sans); font-weight: var(--weight-body);
  font-size: var(--fs-body-s); line-height: var(--lh-body); }
.t-caption { font-family: var(--font-sans); font-weight: var(--weight-body);
  font-size: var(--fs-caption); line-height: var(--lh-snug); color: var(--text-muted); }
/* Eyebrow / kicker — mono, uppercase, wide tracking. The brand's signature label. */
.t-eyebrow { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-micro);
  line-height: 1; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); }
.t-meta { font-family: var(--font-mono); font-weight: 400; font-size: var(--fs-caption);
  line-height: var(--lh-snug); letter-spacing: var(--tracking-wide); }

/* Arabic / RTL helper */
.t-arabic, [dir="rtl"] { font-family: var(--font-arabic); }
[dir="rtl"] { text-align: right; }