/* Raleway carries the brand voice (all headings + most UI text).
   Poppins is the utility/body face used for long-form and captions. */
:root{
  --font-display:'Raleway','Raleway Fallback',Helvetica,Arial,sans-serif;
  --font-body:'Poppins','Poppins Fallback',Helvetica,Arial,sans-serif;
  --font-ui:var(--font-display);

  /* Scale — exact values from the live site's theme */
  --fs-h1:52px;
  --fs-h2:45px;
  --fs-h3:42px;
  --fs-h4:22px;   /* italic orange eyebrow */
  --fs-h5:20px;
  --fs-h6:22px;
  --fs-lead:24px;
  --fs-body:16px;
  --fs-ui:15px;   /* buttons, form labels */
  --fs-small:14px;
  --fs-micro:13px;

  /* Mobile step-downs used by the site */
  --fs-h1-m:30px;
  --fs-h2-m:26px;
  --fs-body-m:15px;

  --fw-light:300; /* @kind font */
  --fw-regular:400; /* @kind font */
  --fw-medium:500; /* @kind font */
  --fw-semibold:600; /* @kind font */
  --fw-bold:700; /* @kind font */
  --fw-black:800; /* @kind font */

  --lh-hero:1.5; /* @kind font */   /* the site sets 1.5 on the hero h1 */
  --lh-heading:1.2; /* @kind font */
  --lh-body:2; /* @kind font */     /* signature: paragraphs run at line-height 2 */
  --lh-tight:1.4; /* @kind font */

  --ls-caps:.08em; /* @kind font */   /* uppercase nav / button lettering */
  --ls-logo:.02em; /* @kind font */
  --tt-caps:uppercase; /* @kind font */

  /* Composite type roles */
  --type-hero:italic var(--fw-bold) var(--fs-h1)/var(--lh-hero) var(--font-display); /* @kind font */
  --type-h2:var(--fw-bold) var(--fs-h2)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-h3:var(--fw-bold) var(--fs-h3)/var(--lh-heading) var(--font-display); /* @kind font */
  --type-eyebrow:italic var(--fw-regular) var(--fs-h4)/var(--lh-tight) var(--font-display); /* @kind font */
  --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-body); /* @kind font */
  --type-button:var(--fw-bold) var(--fs-ui)/1 var(--font-display); /* @kind font */
}