/* ============================================================
   Focus Managed Services — Typography
   Display / headings: SAIRA  (DIN-family; stands in for the
     brand face GRANDVIEW). Set headings in a technical voice —
     tight tracking for large sizes, WIDE tracking + UPPERCASE
     for eyebrows/labels, echoing the guidelines' section titles.
   Body / UI copy: LATO.  Data / codes / metrics: JETBRAINS MONO.
   ============================================================ */
:root {
  /* ---------- Families ---------- */
  --font-display: "Saira", "Bahnschrift", "DIN Alternate", "Segoe UI", system-ui, sans-serif;
  --font-body:    "Lato", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

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

  /* ---------- Type scale (px) ---------- */
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs:  0.75rem;    /* 12 */
  --text-sm:  0.875rem;   /* 14 */
  --text-base:1rem;       /* 16 */
  --text-md:  1.125rem;   /* 18 */
  --text-lg:  1.25rem;    /* 20 */
  --text-xl:  1.5rem;     /* 24 */
  --text-2xl: 1.875rem;   /* 30 */
  --text-3xl: 2.375rem;   /* 38 */
  --text-4xl: 3rem;       /* 48 */
  --text-5xl: 3.75rem;    /* 60 */
  --text-6xl: 4.75rem;    /* 76 */
  --text-7xl: 6rem;       /* 96 */

  /* ---------- Line height ---------- */
  --lh-none:    1;    /* @kind font */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.2;  /* @kind font */
  --lh-normal:  1.5;  /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---------- Letter spacing ---------- */
  --tracking-tighter: -0.03em;  /* @kind font */
  --tracking-tight:   -0.015em; /* @kind font */
  --tracking-normal:  0;        /* @kind font */
  --tracking-wide:    0.04em;   /* @kind font */
  --tracking-wider:   0.10em;   /* @kind font */
  --tracking-widest:  0.18em;   /* @kind font */

  /* ============================================================
     SEMANTIC TEXT ROLES
     ============================================================ */
  /* Display (hero / marketing) */
  --display-font: var(--font-display);
  --display-weight: var(--fw-extra);
  --display-lh: var(--lh-tight);
  --display-tracking: var(--tracking-tight);

  /* Headings */
  --heading-font: var(--font-display);
  --heading-weight: var(--fw-bold);
  --heading-lh: var(--lh-snug);
  --heading-tracking: var(--tracking-tight);

  /* Eyebrow / overline / section label */
  --eyebrow-font: var(--font-display);
  --eyebrow-weight: var(--fw-semibold);
  --eyebrow-tracking: var(--tracking-widest);
  --eyebrow-size: var(--text-xs);

  /* Body */
  --body-font: var(--font-body);
  --body-weight: var(--fw-regular);
  --body-lh: var(--lh-normal);
  --body-size: var(--text-base);

  /* UI label / button */
  --label-font: var(--font-display);
  --label-weight: var(--fw-semibold);
  --label-tracking: var(--tracking-wide);

  /* Mono / data */
  --mono-font: var(--font-mono);
  --mono-tracking: var(--tracking-normal);
}