/**
 * <Card> — vanilla component kit primitive.
 *
 * White surface, 0.5px border, 12px radius, 20px padding.
 * Optional --muted variant for sections that should sit on the page bg.
 *
 * Markup:
 *   <section class="c-card">
 *     <h2 class="c-card__title">Your connection details</h2>
 *     <div class="c-card__body">…</div>
 *   </section>
 */

.c-card {
  display: block;
  background: var(--bg-primary);
  border: 0.5px solid var(--border-tertiary);
  border-radius: var(--radius-lg);
  padding: var(--space-7);
  margin-bottom: var(--space-5);
}

.c-card--muted {
  background: var(--bg-secondary);
}

.c-card__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-h3);
  font-weight: 500;
  color: var(--text-primary);
}

.c-card__subtitle {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-small);
  color: var(--text-secondary);
}

.c-card__body > * + * {
  margin-top: var(--space-3);
}

.c-card__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
}