/* ============================================================
   Valet Design System — Card
   Requires: base-tokens.css, client-tokens.css

   Variants:  default, flush, outlined
   Usage:     .card as a surface container — no opinions on
              inner layout or content, that's the consumer's job
   ============================================================ */

/* ── Base ────────────────────────────────────────────────── */
.card {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-6);
}

/* ── Variants ────────────────────────────────────────────── */

/* Outlined — border instead of shadow, lighter feel */
.card-outlined {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
  padding: var(--space-6);
}

/* Flush — no padding, content controls its own spacing */
.card-flush {
  background-color: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Tinted — subtle brand background, for callouts or highlights */
.card-tinted {
  background-color: color-mix(in oklch, var(--color-primary) 5%, var(--color-surface));
  border-radius: var(--radius-lg);
  border: 1px solid color-mix(in oklch, var(--color-primary) 15%, transparent);
  padding: var(--space-6);
}

/* ── Interactive card (clickable) ────────────────────────── */
.card-interactive {
  cursor: pointer;
  transition: box-shadow 150ms ease, transform 150ms ease;
}

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

.card-interactive:active {
  transform: translateY(0);
  box-shadow: var(--shadow-md);
}

.card-interactive:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ── Section divider within a card ──────────────────────────*/
.card-divider {
  border: none;
  border-block-start: 1px solid var(--color-border-light);
  margin-block: var(--space-6);
}

/* ── Header / footer regions ─────────────────────────────── */
.card-header,
.card-footer {
  padding: var(--space-4) var(--space-6);
}

.card-header {
  border-block-end: 1px solid var(--color-border-light);
}

.card-footer {
  border-block-start: 1px solid var(--color-border-light);
  background-color: color-mix(in oklch, var(--color-bg) 40%, var(--color-surface));
  border-end-start-radius: var(--radius-lg);
  border-end-end-radius: var(--radius-lg);
}