/* ─── Cards ─── */
.card {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  transition: var(--transition);
}

.card-body {
  padding: var(--card-padding);
}

/* ─── Surface (used by templates inline-style blocks; provides bg + radius + shadow) ─── */
.surface {
  background: var(--surface);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--card-padding);
}