/* ============================================================
   Sabatak — Typography Tokens
   Bilingual multi-family system. Latin families drive the
   Latin/EN UI; Arabic families lead for Arabic-first content.
   ============================================================ */

:root {
  /* ---- Font families (Latin / UI) ---- */
  --font-h1:      'Inter', system-ui, sans-serif;          /* H1, H4, H5, H6 workhorse */
  --font-h2:      'Raleway', system-ui, sans-serif;         /* section headings */
  --font-h3:      'JetBrains Mono', ui-monospace, monospace;/* accent / code-style headings */
  --font-body:    'Cabin', system-ui, sans-serif;           /* body text */
  --font-faq:     'Parkinsans', system-ui, sans-serif;      /* FAQ body variant */
  --font-display: 'Krona One', 'Inter', sans-serif;         /* brand / logo labels, uppercase */
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* ---- Font families (Arabic-first) ---- */
  --font-ar-heading: 'El Messiri', 'Cairo', sans-serif;     /* elegant, calligraphic-influenced */
  --font-ar-ui:      'Tajawal', 'Cairo', sans-serif;        /* clean minimalist UI */
  --font-ar-body:    'Cairo', 'Tajawal', sans-serif;        /* modern, geometric body */

  /* ---- Semantic family aliases ---- */
  --font-sans:    var(--font-h1);
  --font-heading: var(--font-h1);

  /* ---- Type scale (desktop baseline, 1200px+) ---- */
  --fs-h1:   64px;   --lh-h1:   1.2;  /* @kind other */  --fw-h1:   700;  /* @kind other */
  --fs-h2:   48px;   --lh-h2:   1.2;  /* @kind other */  --fw-h2:   600;  /* @kind other */
  --fs-h3:   32px;   --lh-h3:   1.3;  /* @kind other */  --fw-h3:   400;  /* @kind other */
  --fs-h4:   20px;   --lh-h4:   1.3;  /* @kind other */  --fw-h4:   700;  /* @kind other */
  --fs-h5:   18px;   --lh-h5:   1.4;  /* @kind other */  --fw-h5:   600;  /* @kind other */
  --fs-h6:   16px;   --lh-h6:   1.4;  /* @kind other */  --fw-h6:   600;  /* @kind other */
  --fs-h6b:  33px;   --lh-h6b:  1.2;  /* @kind other */  --fw-h6b:  400;  /* @kind other */
  --fs-body: 16px;   --lh-body: 1.4;  /* @kind other */  --fw-body: 400;  /* @kind other */

  --fs-sm:   14px;
  --fs-xs:   12px;
  --fs-lg:   18px;

  /* ---- Letter spacing ---- */
  --ls-display: 0.12em;   /* Krona One uppercase labels @kind other */
  --ls-tight:   -0.01em;  /* @kind other */
  --ls-normal:  0;        /* @kind other */
}