/* DHCO. Typography — Space Grotesk throughout.
   Scale transcribed verbatim from the brand guide (p.6). */
:root {
  --font-sans: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --font-display: var(--font-sans);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Sizes (px, as specified) */
  --fs-h1: 64px;
  --fs-h2: 40px;
  --fs-h3: 24px;
  --fs-subtitle: 24px;   /* Body Large */
  --fs-body: 16px;
  --fs-small: 14px;
  --fs-pretitle: 10px;
  --fs-button: 10px;
  --fs-link: 16px;

  /* Letter spacing */
  --ls-tight: -0.02em;   /* headings: -2% */
  --ls-wide: 0.03em;     /* pre-title / button: 3% */

  --lh-heading: 1.05; /* @kind other */
  --lh-body: 1.4; /* @kind other */

  /* Ready-made semantic type roles */
  --type-h1: var(--weight-bold) var(--fs-h1)/var(--lh-heading) var(--font-sans);
  --type-h2: var(--weight-bold) var(--fs-h2)/var(--lh-heading) var(--font-sans);
  --type-h3: var(--weight-bold) var(--fs-h3)/1.2 var(--font-sans);
  --type-body: var(--weight-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
}