.card {
  padding: var(--space-5) var(--space-4);
  border-radius: var(--radius-large);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-soft);
  box-shadow: var(--shadow-card);
}

.card + .card { margin-top: var(--space-4); }

.card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); }
.card__title { margin: 0; }
.card__text { color: var(--color-text-muted); }
.card > :last-child { margin-bottom: 0; }

.card--highlight {
  border-color: transparent;
  background: var(--gradient-brand-dark);
  color: var(--color-on-primary);
}

.card--highlight .card__text { color: var(--color-sidebar-text); }

@media (min-width: 640px) {
  .card { padding: var(--space-5); }
}