/*
 * Card
 * Variants: default, interactive (hover)
 * Sections: header, body, footer
 */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

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

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

.card-header {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-divider);
}

.card-body {
  padding: var(--space-6);
}

.card-footer {
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-divider);
  background: var(--color-surface);
}

/* Compact variant */
.card-compact .card-header,
.card-compact .card-body,
.card-compact .card-footer {
  padding: var(--space-3) var(--space-4);
}

/* No padding */
.card-flush .card-body {
  padding: 0;
}