.ui-card {
  background: var(--ui-card-bg);
  border: 1px solid var(--ui-card-border);
  border-radius: var(--ui-card-radius);
  box-shadow: var(--ui-card-shadow);
  color: var(--ui-text-primary);
  display: flex;
  flex-direction: column;
  gap: var(--ui-card-gap);
  padding: var(--ui-card-padding);
}

.ui-card--compact {
  --ui-card-padding: var(--ui-card-compact-padding, var(--ui-space-2));
  --ui-card-gap: var(--ui-card-compact-gap, var(--ui-space-2));
}

.ui-card--elevated {
  --ui-card-shadow: var(--ui-shadow-card);
}

.ui-card--interactive {
  cursor: pointer;
  transition:
    background-color var(--ui-motion-duration-fast) var(--ui-motion-easing-standard),
    border-color var(--ui-motion-duration-fast) var(--ui-motion-easing-standard),
    box-shadow var(--ui-motion-duration-fast) var(--ui-motion-easing-standard);
}

.ui-card--interactive:hover {
  background: var(--ui-card-hover-bg);
  border-color: var(--ui-card-hover-border);
  box-shadow: var(--ui-card-shadow);
}

.ui-card--interactive:active {
  background: var(--ui-surface-card-active);
}

.ui-card--interactive:focus-visible {
  border-color: var(--ui-card-hover-border);
  box-shadow: var(--ui-focus-ring);
  outline: 0;
}

.ui-card--selected,
.ui-card.is-selected,
.ui-card[aria-selected="true"] {
  background: var(--ui-card-selected-bg);
  border-color: var(--ui-card-selected-border);
  box-shadow: var(--ui-shadow-sm);
}

.ui-card__header,
.ui-card__footer {
  align-items: center;
  display: flex;
  gap: var(--ui-card-gap);
  justify-content: space-between;
}

.ui-card__body {
  display: grid;
  gap: var(--ui-card-gap);
}

@media (prefers-reduced-motion: reduce) {
  .ui-card--interactive {
    transition: none;
  }
}