/* ============================================================
   Deltera Health — Typography tokens
   Primary typeface  : Outfit  — headings, display, numerals, nav.
                        "the voice of the brand": confident, geometric.
   Secondary typeface: Switzer — body copy & dense UI; calm, legible.
   Note from styleguide: letter-spacing = 0 throughout.
   ============================================================ */

:root {
  --font-display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

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

  /* ---- Type scale (web app values; the styleguide doc scale is larger
     because it is drawn at 1440px). These match the live product UI. ---- */
  --text-h1: 48px;   /* page hero */
  --text-h2: 32px;
  --text-h3: 24px;   /* section title */
  --text-h4: 20px;   /* card / panel title (Outfit SemiBold) */
  --text-h5: 18px;
  --text-h6: 16px;

  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;  /* default dense UI size */
  --text-caption: 13px;
  --text-micro: 12px;

  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-normal: 1.5;

  --ls-none: 0;
}

/* ---- Convenience text classes (optional; tokens are the contract) ---- */
.dh-h1 { font-family: var(--font-display); font-weight: var(--fw-bold);     font-size: var(--text-h1); line-height: var(--lh-tight); color: var(--text-primary); }
.dh-h2 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h2); line-height: var(--lh-tight); color: var(--text-primary); }
.dh-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h3); line-height: var(--lh-snug);  color: var(--text-primary); }
.dh-h4 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-snug);  color: var(--text-primary); }
.dh-body { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-body); line-height: var(--lh-normal); color: var(--text-primary); }
.dh-body-sm { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-body-sm); line-height: var(--lh-normal); color: var(--text-secondary); }
.dh-caption { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--text-caption); line-height: var(--lh-normal); color: var(--text-muted); }