.ui-card {
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);

  &.ui-card--interactive {
    transition:
      border-color var(--transition-base),
      box-shadow var(--transition-base),
      transform var(--transition-base);

    &:hover {
      border-color: rgb(51 204 204 / 0.55);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }
  }
}

@media (max-width: 48rem) {
  .ui-card {
    padding: var(--space-4);
  }
}