/* ── Card System ──────────────────────────────────────────────────────────── */
/* Base card surface and interactive hover variant. Specific card types        */
/* (supplier cards, question cards, review cards) build on these foundations. */
/*                                                                              */
/* Usage:                                                                      */
/*   <div class="card">...</div>                 — static surface             */
/*   <div class="card card--interactive">...</div> — hover effects            */

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--card-padding);
}

.card--interactive {
  transition: border-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.card--interactive:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-accent);
}

/* ── Tile variant (used on pricing page) ── */
.card--tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}