/* ═══════════════════════════════════════════
   CARD — the one card surface every SMS site uses
   ═══════════════════════════════════════════

   Surface, edge, corners, shadow and padding for a raised block of
   content. Everything card-shaped composes it — <Card>, or
   `class="card event-card"` on a component that styles its own root —
   and keeps only its content layout in its own styles.

   Padding reads the density tokens, so `data-density="compact"` on any
   ancestor, or on the card itself, tightens it (see @sms/design-tokens).

   `.card--lg` is a bolder frame: board cards, signup cards.
   `.card--flush` drops the padding, for cards whose regions pad themselves.
   `.card--hover` lifts on hover — only for cards that can be clicked.

   Loaded after tokens.css and motion.css, whose variables it reads. */

.card {
	background: var(--surface-card);
	border: 1px solid var(--border-pink-subtle);
	border-radius: var(--radius-xl);
	padding: var(--card-padding);
	box-shadow: var(--shadow-card);
	transition:
		transform var(--duration-slow),
		box-shadow var(--duration-slow);
}

.card--lg {
	border-radius: var(--radius-2xl);
	padding: var(--card-padding-lg);
}

.card--flush {
	padding: 0;
}

.card--hover:hover {
	transform: translateY(-3px);
	box-shadow: var(--shadow-card-hover);
}