@font-face {
  font-family: 'ManropeVar';
  src: url('fonts/Manrope-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'CrimsonProVar';
  src: url('fonts/CrimsonPro-Variable.woff2') format('woff2');
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Base defaults ---------- */
:root {
  --body-leading: 1.6;     /* comfortable line-height */
  --body-tracking: 0.01em; /* a touch of letter spacing helps thin text */
}

/* Site-wide body defaults */
body {
  font-family: 'ManropeVar', sans-serif;
  font-weight: 500;              /* Medium for better legibility */
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
}

/* ---------- Font-family helpers (used in your templates) ---------- */
.font-manrope { font-family: 'ManropeVar', sans-serif; }
.font-crimson { font-family: 'CrimsonProVar', serif; }

/* ---------- Variable weight helpers ---------- */
.font-wght-400 { font-variation-settings: 'wght' 400; }
.font-wght-500 { font-variation-settings: 'wght' 500; }
.font-wght-600 { font-variation-settings: 'wght' 600; }

/* ---------- Readable small text helper ---------- */
/* Use this where you currently have tiny copy like the DFBP “What This Isn’t” block */
.readable-sm {
  font-size: 0.875rem;           /* text-sm */
  line-height: var(--body-leading);
  letter-spacing: var(--body-tracking);
  font-variation-settings: 'wght' 500;
}