/* Leyrer + Graf — Typography tokens
   The brand uses a Helvetica/Arial grotesque ("bodyfont" on the live site, which
   falls back to the Helvetica Neue → Arial system stack). We use that exact stack —
   no webfont is loaded, matching the site 1:1.

   Voice of the type: HEAVY, UPPERCASE, ORANGE section headings with tight tracking;
   calm dark-grey body set at a comfortable 1.6 line-height. */
:root {
  /* Families */
  --font-sans: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  --font-heading: var(--font-sans);
  --font-body: var(--font-sans);

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  /* Type scale (px) */
  --fs-display: 56px;  /* hero */
  --fs-h1: 40px;
  --fs-h2: 30px;       /* "WAS IST COMPLIANCE?" section heads */
  --fs-h3: 22px;
  --fs-h4: 18px;
  --fs-body-lg: 19px;
  --fs-body: 17px;
  --fs-small: 14px;
  --fs-eyebrow: 13px;  /* uppercase labels, buttons */

  /* Line heights */
  --lh-tight: 1.08;
  --lh-heading: 1.15;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  /* Letter spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;   /* uppercase headings */
  --ls-wider: 0.14em;  /* buttons, eyebrows */
}

/* Heading mixin pattern — apply .lg-heading for the signature look */
.lg-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-heading);
  color: var(--text-heading);
}
.lg-eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  font-size: var(--fs-eyebrow);
  color: var(--color-primary);
}