/* Products That Count — typography.
   Source: Brand Style Guide 10.2020, p.10 "Typography".
   "The classic modern Arial font is the primary brand font... Replacing fonts
   with alternatives or system fonts should not be done under any circumstances."
   Headlines Arial Black / Sub-headlines Arial Bold / Body Arial Regular /
   Call-outs Arial Italic.
   No webfont binaries were supplied with the guide; Arial ships with every
   target OS, so the stack resolves to the real typeface with no substitution.
   Liberation Sans / Helvetica are metric-compatible fallbacks for Linux. */
:root{
  --font-brand:Arial,"Helvetica Neue",Helvetica,"Liberation Sans",sans-serif;
  --font-display:var(--font-brand);
  --font-body:var(--font-brand);

  --weight-regular:400;
  --weight-bold:700;
  --weight-black:900;

  /* Scale, measured off the 1440-wide application mockups (pp.16-21) */
  --text-hero:72px;
  --text-h1:56px;
  --text-h2:40px;
  --text-h3:28px;
  --text-h4:22px;
  --text-body-lg:20px;
  --text-base:17px;      /* body size — NOT --text-body, which is the body TEXT COLOUR */
  --text-body-sm:15px;
  --text-eyebrow:15px;
  --text-button:16px;
  --text-caption:13px;

  --leading-tight:1.05;
  --leading-snug:1.2;
  --leading-normal:1.55;
  --leading-loose:1.7;

  --tracking-tight:-0.01em;
  --tracking-normal:0;
  --tracking-wide:0.06em;
  --tracking-wider:0.1em;   /* eyebrows, buttons, the logo lockup */

  /* Composite roles */
  --type-hero:var(--weight-black) var(--text-hero)/var(--leading-tight) var(--font-display);
  --type-h1:var(--weight-black) var(--text-h1)/var(--leading-snug) var(--font-display);
  --type-h2:var(--weight-bold) var(--text-h2)/var(--leading-snug) var(--font-display);
  --type-h3:var(--weight-bold) var(--text-h3)/1.3 var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-body-lg:var(--weight-regular) var(--text-body-lg)/var(--leading-normal) var(--font-body);
  --type-eyebrow:var(--weight-bold) var(--text-eyebrow)/1.2 var(--font-body);
  --type-button:var(--weight-bold) var(--text-button)/1 var(--font-body);
}