/* ============================================================
   EACBL · TYPOGRAPHY
   Cinzel         — inscriptional Roman caps. HEADINGS (h1/h2, big
                    titles) and the brand wordmark lockup.
   Telegraf       — neo-grotesque. BODY, EYEBROW, SUBHEADS (h3–h6) & UI.
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------- */
  --font-display:  'Cinzel', 'Times New Roman', serif;  /* headings + wordmark        */
  --font-telegraf: 'Telegraf', -apple-system, 'Segoe UI', system-ui, sans-serif; /* body + eyebrow + UI */
  --font-sans:     var(--font-telegraf); /* subheads/UI — now Telegraf */
  --font-body:     var(--font-telegraf);
  --font-eyebrow:  var(--font-telegraf);
  --font-wordmark: var(--font-display);  /* wordmark uses the heading face      */
  --font-mono:     'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ---- Type scale (1.20 minor-third, 16px base) ----------- */
  --text-2xs:  0.6875rem;  /* 11 — micro labels                */
  --text-xs:   0.75rem;    /* 12                               */
  --text-sm:   0.875rem;   /* 14                               */
  --text-base: 1rem;       /* 16                               */
  --text-md:   1.125rem;   /* 18                               */
  --text-lg:   1.375rem;   /* 22                               */
  --text-xl:   1.75rem;    /* 28                               */
  --text-2xl:  2.25rem;    /* 36                               */
  --text-3xl:  3rem;       /* 48                               */
  --text-4xl:  4rem;       /* 64                               */
  --text-5xl:  5.25rem;    /* 84 — hero display                */

  /* ---- Weights ----------------------------- @kind font ---- */
  --fw-regular:  400; /* @kind font */
  --fw-medium:   500; /* @kind font */
  --fw-semibold: 600; /* @kind font */
  --fw-bold:     700; /* @kind font */
  --fw-extra:    800; /* @kind font */

  /* ---- Line heights ------------------------ @kind font ---- */
  --lh-tight:   1.08; /* @kind font */
  --lh-snug:    1.22; /* @kind font */
  --lh-normal:  1.5; /* @kind font */
  --lh-relaxed: 1.65; /* @kind font */

  /* ---- Letter spacing ---------------------- @kind font ---- */
  --ls-display:  0.06em;   /* @kind font */
  --ls-wordmark: 0.18em;   /* @kind font */
  --ls-tight:   -0.015em;  /* @kind font */
  --ls-normal:   0;        /* @kind font */
  --ls-label:    0.08em;   /* @kind font */

  /* ---- Semantic roles ---------------------- @kind font ---- */
  --eyebrow-size: var(--text-xs); /* @kind font */
  --eyebrow-track: var(--ls-label); /* @kind font */
}

/* Optional helper classes — components reference vars directly,
   these are for specimen cards & quick prototyping. */
.eacbl-display {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--text-strong);
}
.eacbl-wordmark {
  font-family: var(--font-wordmark);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wordmark);
  text-transform: uppercase;
  color: var(--bark-700);
}
.eacbl-eyebrow {
  font-family: var(--font-eyebrow);
  font-weight: var(--fw-extra);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--clay);
}
.eacbl-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}