/* ============================================================
   Collins Web Design — Typography tokens
   Single family: Inter. Bold for headings/labels, Regular for body.
   Headings are UPPERCASE, tight (100% line-height), heavily tracked tight.
   ============================================================ */
:root {
  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;

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

  /* ---- Type scale (px → rem at 16px base) ---- */
  --fs-display: 54px;   /* hero / section H1 — UPPERCASE bold */
  --fs-h1:      44px;
  --fs-h2:      34px;
  --fs-h3:      25px;
  --fs-title:   22px;   /* card titles */
  --fs-lg:      18px;   /* lead paragraph */
  --fs-body:    16px;   /* body */
  --fs-sm:      14px;   /* small / button text */
  --fs-xs:      13px;   /* eyebrow / labels */
  --fs-2xs:     12px;   /* meta / tags */
  --fs-3xs:     10px;   /* micro-labels */

  /* ---- Line heights ---- */
  --lh-tight:   1; /* @kind font */ /* headings render at 100% in source */
  --lh-snug:    1.25; /* @kind font */
  --lh-body:    1.6; /* @kind font */

  /* ---- Letter spacing ---- */
  --ls-display: -0.02em;  /* tight on big uppercase headings */
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.08em;   /* wide tracking on small uppercase labels */
  --ls-label:   0.04em;

  /* ---- Semantic roles ---- */
  --text-display-weight: var(--fw-bold);
  --text-eyebrow-weight: var(--fw-bold);
}