/* ============================================================================
   HSBC — TYPOGRAPHY TOKENS
   Brand face: "Univers Next for HSBC" (licensed). Headings are LARGE + LIGHT
   with generous whitespace; body is regular weight at a comfortable line-height.
   ============================================================================ */

:root {
  /* ---- Families ---------------------------------------------------------- */
  --font-brand: "Univers Next for HSBC", "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:  var(--font-brand);
  --font-mono:  "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --mono:       var(--font-mono);

  /* ---- Weights ----------------------------------------------------------- */
  --weight-light:   300;   /* large display headings */
  --weight-regular: 400;   /* body */
  --weight-medium:  500;   /* utility links, emphasis, buttons */
  --weight-bold:    700;   /* wordmark, strong emphasis */

  /* ---- Type scale (px) --------------------------------------------------- */
  --fs-display:  72px;   /* page H1 — light weight, marketing hero */
  --fs-h1:       48px;
  --fs-h2:       34px;
  --fs-h3:       26px;
  --fs-lead:     26px;   /* intro paragraph */
  --fs-body-lg:  20px;
  --fs-body:     18px;   /* default body */
  --fs-ui:       17px;   /* nav / interface text */
  --fs-small:    15px;   /* breadcrumb, captions */
  --fs-tiny:     13px;   /* legal, footnotes */

  /* ---- Line height (unitless ratios) ------------------------------------ */
  --lh-tight:    1.05;   /* @kind other */
  --lh-heading:  1.2;    /* @kind other */
  --lh-snug:     1.45;   /* @kind other */
  --lh-body:     1.7;    /* @kind other */

  /* ---- Letter spacing ---------------------------------------------------- */
  --ls-display:  -0.5px;  /* @kind other */
  --ls-normal:   0;       /* @kind other */
  --ls-wordmark: 0.5px;   /* @kind other */
  --ls-caps:     0.6px;   /* @kind other */

  /* ---- Semantic text roles ----------------------------------------------- */
  --text-display-size:   var(--fs-display);
  --text-display-weight: var(--weight-light);
  --text-h1-size:        var(--fs-h1);
  --text-h2-size:        var(--fs-h2);
  --text-lead-size:      var(--fs-lead);
  --text-body-size:      var(--fs-body);
}