.pre-card {
  --card-gap: var(--space-layout-md);
  --card-padding: var(--space-layout-md);

  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  overflow: hidden;
  color: var(--color-content-primary);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-control);
}

.pre-card[data-size='sm'] {
  --card-gap: var(--space-layout-sm);
  --card-padding: var(--space-layout-sm);
  border-radius: var(--radius-control);
}

.pre-card[data-size='lg'] {
  --card-gap: var(--space-layout-lg);
  --card-padding: var(--space-layout-lg);
  border-radius: var(--radius-dialog);
}

.pre-card[data-variant='outlined'] {
  box-shadow: none;
}

.pre-card[data-variant='elevated'] {
  box-shadow: var(--shadow-card);
}

.pre-card[data-variant='muted'] {
  background: var(--color-surface-muted);
}

.pre-card[data-variant='interactive'] {
  transition:
    border-color 150ms ease,
    box-shadow 150ms ease,
    transform 150ms ease;
}

.pre-card[data-variant='interactive']:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-card);
  transform: translateY(-1px);
}

.pre-card-header,
.pre-card-content,
.pre-card-footer {
  padding-inline: var(--card-padding);
}

.pre-card-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-component-sm);
  padding-top: var(--card-padding);
}

.pre-card-content {
  font-size: var(--font-size-body-sm);
}

.pre-card-footer {
  display: flex;
  align-items: center;
  gap: var(--space-component-md);
  padding-bottom: var(--card-padding);
}

.pre-card-title {
  margin: 0;
  color: var(--color-content-primary);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heading);
  line-height: 1.25;
}

.pre-card-description {
  margin: 0;
  color: var(--color-content-secondary);
  font-size: var(--font-size-body-sm);
  line-height: 1.4;
}