/* ============================================================
   EWE · Typography scale
   Headings & UI use the primary (Volte) typeface, Bold for
   headlines. Body copy is Regular/Semibold. Letter-spacing is
   near-neutral; headings are tight, body slightly open.
   ============================================================ */

:root {
  /* Font weights (Volte / Hanken Grotesk) */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 600;  /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold: 700;    /* @kind font */

  /* Display / Deco */
  --fs-deco: 99px;          /* oversized decorative numerals & words */

  /* Headings — desktop */
  --fs-h1: 60px;  --lh-h1: 68px;
  --fs-h2: 42px;  --lh-h2: 46px;
  --fs-h3: 32px;  --lh-h3: 38px;
  --fs-h4: 28px;  --lh-h4: 34px;
  --fs-h5: 20px;  --lh-h5: 26px;
  --fs-h6: 16px;  --lh-h6: 22px;
  --fs-h7: 14px;  --lh-h7: 20px;

  /* Headings — mobile */
  --fs-h1-m: 42px;
  --fs-h2-m: 30px;
  --fs-h3-m: 26px;
  --fs-h4-m: 24px;

  /* Sub-headlines */
  --fs-subhead: 18px; --lh-subhead: 26px;

  /* Body */
  --fs-body: 16px;        --lh-body: 24px;
  --fs-body-sm: 14px;     --lh-body-sm: 20px;
  --fs-body-xs: 12px;     --lh-body-xs: 18px;

  /* Buttons & links */
  --fs-btn: 18px;          /* primary button text (Semibold 600) */
  --fs-btn-sm: 16px;       /* secondary / tertiary / links */
  --fs-link-sm: 14px;

  /* Letter spacing */
  --ls-tight: 0;       /* @kind font */
  --ls-body: 0.01em;   /* @kind font */
}

/* ---- Optional helper classes (also available to consumers) ---- */
.ewe-h1 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-h1); line-height: var(--lh-h1); color: var(--text-body); }
.ewe-h2 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-h2); line-height: var(--lh-h2); color: var(--text-body); }
.ewe-h3 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-h3); line-height: var(--lh-h3); color: var(--text-body); }
.ewe-h4 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-h4); line-height: var(--lh-h4); color: var(--text-body); }
.ewe-h5 { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-h5); line-height: var(--lh-h5); color: var(--text-body); }
.ewe-subhead { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--fs-subhead); line-height: var(--lh-subhead); color: var(--text-body); }
.ewe-body { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-body); }
.ewe-body-sm { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--fs-body-sm); line-height: var(--lh-body-sm); color: var(--text-body); }
.ewe-deco { font-family: var(--font-primary); font-weight: var(--fw-bold); font-size: var(--fs-deco); line-height: 0.9; color: var(--ewe-grau-200); }