/* ============================================================
   TYPOGRAPHY — Modl & Coll.
   Spectral (serif display) over Source Sans 3 (humanist body).
   Generous line-height: many readers are stressed and on mobile.
   ============================================================ */
:root {
  /* ---- Families ------------------------------------------- */
  --font-display: 'Spectral', 'Spectral Fallback', 'Spectral Fallback 2', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Source Sans 3', 'Source Sans Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

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

  /* ---- Type scale (1.225 minor-third-ish, screen-tuned) --- */
  --text-2xs: 0.75rem;    /* 12 — legal fine print            */
  --text-xs:  0.8125rem;  /* 13 — meta, eyebrow                */
  --text-sm:  0.9375rem;  /* 15 — captions, labels             */
  --text-base:1.0625rem;  /* 17 — body (mobile-comfortable)    */
  --text-md:  1.1875rem;  /* 19 — lead paragraph               */
  --text-lg:  1.375rem;   /* 22 — small heading                */
  --text-xl:  1.75rem;    /* 28 — H3                           */
  --text-2xl: 2.25rem;    /* 36 — H2                           */
  --text-3xl: 2.875rem;   /* 46 — H1                           */
  --text-4xl: 3.75rem;    /* 60 — hero display                 */
  --text-5xl: 4.75rem;    /* 76 — oversized statement          */

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

  /* ---- Letter spacing ------------------------------------- */
  --ls-tight: -0.02em;    /* @kind other */
  --ls-snug: -0.01em;     /* @kind other */
  --ls-normal: 0;         /* @kind other */
  --ls-wide: 0.04em;      /* @kind other */
  --ls-eyebrow: 0.14em;   /* @kind other */
}

/* ---- Optional element defaults (opt-in via consumers) ----- */
.dsx-display { font-family: var(--font-display); font-weight: var(--fw-regular); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.dsx-h1 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--text-3xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-strong); }
.dsx-h2 { font-family: var(--font-display); font-weight: var(--fw-regular); font-size: var(--text-2xl); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); color: var(--text-strong); }
.dsx-h3 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-xl); line-height: var(--lh-snug); color: var(--text-strong); }
.dsx-lead { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-md); line-height: var(--lh-relaxed); color: var(--text-body); }
.dsx-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); }
.dsx-eyebrow { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-xs); line-height: var(--lh-normal); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-accent); }
.dsx-meta { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-sm); line-height: var(--lh-normal); color: var(--text-muted); }