/* ============================================================
   Protodeal — base element defaults & typographic helpers
   ============================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---- Display & heading helpers ---- */
.pd-display {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--ink-900);
}
.pd-h1 { font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-900); margin: 0; }
.pd-h2 { font-size: var(--text-2xl); font-weight: var(--weight-bold); line-height: var(--leading-snug); color: var(--ink-800); margin: 0; }
.pd-h3 { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--ink-800); margin: 0; }
.pd-h4 { font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--ink-800); margin: 0; }

/* ---- Body & supporting text ---- */
.pd-body { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-primary); }
.pd-body-lg { font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--text-primary); }
.pd-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-secondary); }
.pd-caption { font-size: var(--text-xs); color: var(--text-muted); }
.pd-eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---- Wordmark ---- */
.pd-wordmark { color: var(--blue-800); display: inline-flex; align-items: center; }
.pd-wordmark svg { display: block; height: 100%; width: auto; }