.ds-card {
  background-color: var(--ds-color-white);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
}

.ds-card--bordered {
  border: 1px solid var(--ds-color-gray-200);
}

.ds-card--elevated {
  box-shadow: var(--ds-shadow-md);
}

.ds-card__header {
  padding: var(--ds-space-5) var(--ds-space-6);
  border-bottom: 1px solid var(--ds-color-gray-100);
}

.ds-card__body {
  padding: var(--ds-space-6);
}

.ds-card__footer {
  padding: var(--ds-space-4) var(--ds-space-6);
  border-top: 1px solid var(--ds-color-gray-100);
  background-color: var(--ds-color-gray-50);
}

.ds-card__title {
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-lg);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-color-gray-900);
  margin: 0 0 var(--ds-space-1);
}

.ds-card__subtitle {
  font-family: var(--ds-font-family);
  font-size: var(--ds-font-size-sm);
  color: var(--ds-color-gray-500);
  margin: 0;
}

.ds-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--ds-transition-normal),
              border-color var(--ds-transition-normal);
}

.ds-card--interactive:hover {
  box-shadow: var(--ds-shadow-lg);
  border-color: var(--ds-color-gray-300);
}