.card {
  min-inline-size: 0;
  border: 1px solid var(--border-standard);
  border-radius: var(--radius-md);
}
.default {
  background: var(--surface-primary);
}
.muted {
  background: var(--surface-muted);
}
.elevated {
  background: var(--surface-elevated);
  box-shadow: var(--shadow-card);
}
.strong {
  background: var(--surface-strong);
}
.none {
  padding: 0;
}
.compact {
  padding: var(--space-4);
}
.comfortable {
  padding: var(--space-6);
}
.spacious {
  padding: clamp(var(--space-6), 5vw, var(--space-10));
}
.interactive {
  transition:
    border-color var(--duration-fast) var(--easing-productive),
    transform var(--duration-fast) var(--easing-productive);
}
.interactive:hover {
  border-color: var(--interactive-primary);
  transform: translateY(-2px);
}
.interactive:focus-within {
  border-color: var(--focus-ring);
}
@media (prefers-reduced-motion: reduce) {
  .interactive {
    transition: none;
  }
  .interactive:hover {
    transform: none;
  }
}
