/* ── Card ───────────────────────────────────────────────── */
.card {
  background: var(--section-bg);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  transition: transform .15s var(--ease), box-shadow .15s var(--ease);
}
.card:active { transform: scale(.97); }
.card-elevated { box-shadow: var(--shadow-sm); border: none; }

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  transition: all .15s var(--ease);
  white-space: nowrap;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: var(--btn-bg);
  color: var(--btn-text);
}
.btn-primary:active { filter: brightness(.9); }
.btn-secondary {
  background: var(--bg2);
  color: var(--text);
}
.btn-outline {
  border: 1.5px solid var(--border);
  color: var(--text);
  background: transparent;
}
.btn-ghost {
  color: var(--link);
  background: transparent;
}
.btn-block { width: 100%; }
.btn-lg {
  padding: var(--sp-4) var(--sp-6);
  font-size: var(--fs-base);
  border-radius: var(--r-md);
}

/* ── Badge ──────────────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 2px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  text-transform: uppercase;
}
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-sage { background: var(--sage-soft); color: var(--sage); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }