/* ============================================================
   We Dispatching — Typography tokens
   Display: Playfair Display (elegant high-contrast serif, echoes wordmark)
   Body/UI: Archivo (sturdy American grotesque)
   Mono/data: IBM Plex Mono (load numbers, rates, MC/DOT #s)
   ============================================================ */
:root {
  /* Families */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-sans:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

  /* Semantic aliases */
  --font-heading: var(--font-display);
  --font-body:    var(--font-sans);
  --font-ui:      var(--font-sans);
  --font-data:    var(--font-mono);

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

  /* Type scale (rem, 16px base) */
  --fs-display-2xl: 4.5rem;   /* 72 — hero */
  --fs-display-xl:  3.5rem;   /* 56 */
  --fs-display-lg:  2.75rem;  /* 44 */
  --fs-h1: 2.25rem;  /* 36 */
  --fs-h2: 1.75rem;  /* 28 */
  --fs-h3: 1.375rem; /* 22 */
  --fs-h4: 1.125rem; /* 18 */
  --fs-body-lg: 1.125rem; /* 18 */
  --fs-body:    1rem;     /* 16 */
  --fs-body-sm: 0.875rem; /* 14 */
  --fs-caption: 0.75rem;  /* 12 */
  --fs-overline:0.6875rem;/* 11 */

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

  /* Letter spacing */
  --ls-tight:   -0.02em; /* @kind other */
  --ls-normal:  0; /* @kind other */
  --ls-wide:    0.04em; /* @kind other */
  --ls-wider:   0.12em; /* overlines / eyebrows · @kind other */
  --ls-wordmark:0.22em; /* WE DISPATCHING lockup spacing · @kind other */
}

/* ---- Utility text roles (optional helpers for cards & kits) ---- */
.wd-overline {
  font-family: var(--font-ui);
  font-weight: var(--fw-bold);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--brand-primary);
}
.wd-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--text-strong);
}
.wd-wordmark {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--ls-wordmark);
  color: var(--text-strong);
}