/* Shared Button and Card component classes.
 * Requires: css/tokens.css
 *
 * Buttons — usage rules:
 *   .btn       = secondary/neutral action (Log In, Talk to Sales, View Full Pricing)
 *   .btn-solid = primary CTA — ONE per section, never two competing solid buttons side by side
 *   .btn-sm    = compact variant of either .btn or .btn-solid
 *
 * Cards — usage rules:
 *   .card          = standard card surface
 *   .card-featured = ONE per page — the single "this is the real thing" anchor element
 */

/* --- Buttons --- */
.btn {
  display: inline-block;
  border: 2px solid var(--border);
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 15px;
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  line-height: 1;
}

.btn-solid {
  background: var(--accent);
  color: var(--accent-ink);
  border-color: var(--accent);
}

/* A disabled .btn had no styling whatsoever: same surface, same border, same
   cursor: pointer as a live one. The merchant console's batch bar disables
   Approve, Reject and Clear whenever nothing is selected, so all three looked
   clickable and silently did nothing -- the attribute was always correct, only
   the appearance was missing, which is a hard thing for a user to tell apart
   from a broken button.

   On the base class rather than in the console's own stylesheet, because .btn
   is shared and dialog.js disables buttons too.

   Explicit muted colours rather than `opacity`, so the contrast is predictable
   instead of being whatever 50% of the accent happens to land on.

   [aria-disabled] is included because .btn is used on anchors as well (hence
   text-decoration: none above), and an anchor cannot match :disabled. */
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  background: var(--surface);
  color: var(--ink-muted);
  border-color: var(--border-soft);
}

/* After the rule above and at equal specificity, so this wins on source order:
   a solid button keeps its filled shape when disabled, just not its accent --
   50% of the accent still reads as the primary action. */
.btn-solid:disabled,
.btn-solid[aria-disabled="true"] {
  background: var(--border-soft);
  color: var(--ink-muted);
  border-color: var(--border-soft);
}

.btn-sm {
  padding: 6px 12px;
  font-size: 13px;
}

/* --- Cards --- */
.card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}

.card-featured {
  background: var(--surface);
  border: 2px solid var(--accent);
  border-radius: 10px;
  padding: 22px;
}