/* ============================================================
   Hexagon — Typography
   ------------------------------------------------------------
   Single typeface (Arial) used confidently across roles.
   Hierarchy comes from size, weight and case — not multiple
   families. Headings use sentence case (British English).
   ============================================================ */

:root {
  /* ---- Type scale (px-based, 1.25 major-third-ish) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-md:   16px;   /* base body */
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  36px;
  --text-4xl:  48px;
  --text-5xl:  64px;
  --text-6xl:  84px;

  /* ---- Weights — Arial: Regular & Bold are the workhorses ---- */
  --weight-regular: 400;
  --weight-medium:  600;   /* synthesised on Arial; use sparingly */
  --weight-bold:    700;

  /* ---- Line heights ---- */
  --leading-tight:   1.05;   /* display headlines */
  --leading-snug:    1.2;    /* headings         */
  --leading-normal:  1.5;    /* body             */
  --leading-relaxed: 1.65;   /* long-form        */

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;  /* large display */
  --tracking-normal: 0;
  --tracking-wide:   0.04em;   /* eyebrows / all-caps labels */
  --tracking-caps:   0.08em;

  /* ---- Semantic role tokens ---- */
  --display-size:    var(--text-6xl);
  --h1-size:         var(--text-4xl);
  --h2-size:         var(--text-3xl);
  --h3-size:         var(--text-2xl);
  --h4-size:         var(--text-xl);
  --body-size:       var(--text-md);
  --small-size:      var(--text-sm);
  --eyebrow-size:    var(--text-xs);
}