/* Buttons size to their label (Spanish runs ~30% longer). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font: inherit; font-weight: 500; line-height: 1.2; white-space: nowrap;
  padding: 10px 22px; border-radius: var(--radius-control); border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled { cursor: not-allowed; opacity: .5; }

/* Primary: the brand-deep pill with ivory text (brand book). `--ink` is the same button. */
.btn--primary, .btn--ink { background: var(--brand-deep); color: var(--ivory); font-weight: 600; border-radius: var(--radius-tag); }
.btn--primary:hover, .btn--ink:hover { background: var(--topbar-active); }
.btn--go { background: var(--brand-deep); color: var(--brand-lime); font-weight: 600; border-radius: var(--radius-tag); }
.btn--go:hover { background: var(--topbar-active); color: var(--brand-lime); }
/* Market calls to action: brand lime with brand-deep text (owner's choice, 2026-10-26). */
.btn--lime { background: var(--brand-lime); color: var(--brand-deep); font-weight: 600; border-radius: var(--radius-tag); }
.btn--lime:hover { background: oklch(from var(--brand-lime) calc(l - 0.06) c h); color: var(--brand-deep); }
.btn--offer { background: var(--offer); color: var(--ivory); font-weight: 600; border-radius: var(--radius-tag); }
.btn--offer:hover { background: oklch(from var(--offer) calc(l - 0.06) c h); color: var(--ivory); }
.btn--accent { background: var(--accent); color: var(--ivory); font-weight: 600; border-radius: var(--radius-tag); }
.btn--accent:hover { background: var(--accent-hover); color: var(--ivory); }
.btn--lg { padding: 12px 22px; font-size: var(--text-md); }
.btn__plus { font-size: 18px; line-height: 1; margin-right: 6px; }
.btn--outline { background: var(--panel); color: var(--ink); border-color: var(--border); }
.btn--outline:hover { background: var(--panel-sunken); }
.btn--danger-text { background: transparent; color: var(--danger-text); padding-inline: 14px; }
.btn--danger-text:hover { background: var(--failed-tint); }
.btn--link { background: transparent; color: var(--accent); padding-inline: 14px; }

.btn--sm { padding: 7px 12px; font-size: 13px; }
.btn--block { width: 100%; padding-block: 11px; }

/* button_to wraps a button in a form; keep it inline. */
form.button_to { display: inline; }