/* ============================================================
   Fareon — Typography tokens
   Display:  Reem Kufi  (geometric Kufic — confident, architectural)
   Body/UI:  Rethink Sans
   Mono:     Inconsolata (brand spec for animation/data) — load from
             Google Fonts when needed; falls back to system mono.
   ============================================================ */

:root {
  /* ---- Families ------------------------------------------- */
  --font-display: "Reem Kufi", "Trebuchet MS", system-ui, sans-serif;
  --font-body:    "Rethink Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono:    "Inconsolata", ui-monospace, "SF Mono", Menlo, monospace;

  /* ---- Weights -------------------------------------------- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extrabold:800; /* @kind font */

  /* ---- Type scale (1.25 major-third-ish, tuned) ----------- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   21px;
  --text-xl:   26px;
  --text-2xl:  32px;
  --text-3xl:  40px;
  --text-4xl:  52px;
  --text-5xl:  66px;
  --text-6xl:  84px;

  /* ---- Line heights --------------------------------------- */
  --leading-tight:   1.05;
  --leading-snug:    1.18;
  --leading-normal:  1.45;
  --leading-relaxed: 1.6;

  /* ---- Letter spacing ------------------------------------- */
  /* Reem Kufi display set tight; eyebrows/labels set WIDE (a
     signature of the brand deck — "BRAND COLORS", "PRIMARY") */
  --tracking-display: -0.01em;
  --tracking-tight:   -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-wider:   0.16em;   /* eyebrow / kicker labels */
  --tracking-widest:  0.24em;

  /* =========================================================
     Semantic roles
     ========================================================= */
  --role-display:  var(--fw-medium) var(--text-5xl)/var(--leading-tight) var(--font-display);
  --role-h1:       var(--fw-medium) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --role-h2:       var(--fw-medium) var(--text-3xl)/var(--leading-snug) var(--font-display);
  --role-h3:       var(--fw-medium) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --role-h4:       var(--fw-semibold) var(--text-xl)/var(--leading-snug) var(--font-body);
  --role-body-lg:  var(--fw-regular) var(--text-md)/var(--leading-relaxed) var(--font-body);
  --role-body:     var(--fw-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --role-body-sm:  var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-body);
  --role-label:    var(--fw-semibold) var(--text-sm)/1.2 var(--font-body);
  --role-eyebrow:  var(--fw-semibold) var(--text-xs)/1.2 var(--font-body);
  --role-mono:     var(--fw-regular) var(--text-sm)/var(--leading-normal) var(--font-mono);
}