/* ───────────────────────────────────────────────────────────────
   DeftBid — Marketing Landing Page ("Ink" direction)
   A3 · Button component — pill, all variants.

   Source: design/landing/brand.jsx `Btn`. Consumes A1 tokens (no raw brand hex).
   Usage:
     <a class="btn btn--primary" href="#">Start free <svg …/></a>   (lg by default)
     <button class="btn btn--ghost btn--sm">Watch demo</button>
   A trailing icon is optional — drop an inline 24×24 stroke SVG (A4) as the last
   child; it inherits currentColor and is sized per button size.
   ─────────────────────────────────────────────────────────────── */

.btn {
  /* Base = large (lg). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 54px;
  padding: 0 26px;
  border-radius: var(--radius-pill, 999px);
  font-family: var(--font-sans, 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);
  font-weight: 700;
  font-size: 16.5px;
  letter-spacing: -0.01em;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease, filter .15s ease;
}

/* ── Sizes (both ≥ 44px touch target) ─────────────────────────── */
.btn--lg { height: 54px; padding: 0 26px; font-size: 16.5px; }
.btn--sm { height: 44px; padding: 0 18px; font-size: 15px; }

/* ── Trailing icon ────────────────────────────────────────────── */
.btn > svg { flex-shrink: 0; width: 19px; height: 19px; }
.btn--sm > svg { width: 17px; height: 17px; }

/* ── Variants ─────────────────────────────────────────────────── */
.btn--primary {
  background: var(--solid, #2052D6); color: #fff;
  box-shadow: var(--shadow-primary, 0 8px 22px rgba(45,107,240,0.30), 0 1px 2px rgba(20,23,28,0.10));
}
.btn--on-dark    { background: #fff; color: var(--ink, #14171C); }
.btn--ink        { background: var(--ink, #14171C); color: #fff; }
.btn--ghost      { background: transparent; color: var(--ink, #14171C); box-shadow: inset 0 0 0 1.5px var(--line, rgba(20,23,28,0.10)); }
.btn--ghost-dark { background: rgba(255,255,255,0.06); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.20); }
.btn--green      { background: var(--go, #157A52); color: #fff; }

/* ── Interaction: hover lifts 1px + brightens; press settles ──── */
.btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn:active { transform: scale(0.99); filter: none; }
/* Primary settles to the darker "press" token on click. */
.btn--primary:active { background: var(--press, #163FA8); }

/* ── Focus visibility (keyboard) ──────────────────────────────── */
.btn:focus-visible { outline: 2px solid var(--cobalt, #2D6BF0); outline-offset: 2px; }
.btn--on-dark:focus-visible,
.btn--ghost-dark:focus-visible { outline-color: var(--on-dark, #6FA0FF); }

/* ── Disabled ─────────────────────────────────────────────────── */
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ── Respect reduced-motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover, .btn:active { transform: none; filter: none; }
}