/* =============================================================================
   Button — styles
   ─────────────────────────────────────────────────────────────────────────────
   All colours, spacing, and radii reference tokens. No raw hex anywhere.
   Variant taxonomy matches Figma; states use the "-dark" / "-mid" siblings
   of each token family for hover and pressed.
   ========================================================================== */

/* ─── Base ────────────────────────────────────────────────────────────────── */
.btn {
  /* layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  box-sizing: border-box;

  /* typography */
  font-family: var(--font-body);
  font-weight: var(--font-button-l-weight);
  line-height: var(--font-button-l-line-height);
  letter-spacing: 0;
  white-space: nowrap;

  /* surface */
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;

  /* interaction */
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    opacity 120ms ease;
  user-select: none;
  position: relative;
}

.btn:focus-visible {
  outline: 2px solid var(--fill-brand-default);
  outline-offset: 2px;
}

.btn:disabled,
.btn[aria-busy='true'] {
  cursor: not-allowed;
}

/* ─── Content layout ──────────────────────────────────────────────────────── */
.btn__content {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.btn__label {
  display: inline-block;
}

/* ─── Sizes ───────────────────────────────────────────────────────────────── */
/* Solid-fill variants (primary, buy, sell) use 24px horizontal padding.
   Outline/transparent variants override to 12px below. */

.btn--lg {
  height: 48px;
  padding: 0 24px;
  font-size: var(--font-button-l-size); /* 16px */
  /* font-weight inherited from base: var(--font-button-l-weight) = 600 */
}

.btn--md {
  height: 40px;
  padding: 0 24px;
  font-size: 14px;
  font-weight: 500;          /* Medium — Figma: Mob/Button/Small */
  letter-spacing: 0.14px;
}

.btn--sm {
  height: 32px;
  padding: 0 24px;
  font-size: 14px;           /* Figma shows 14px for Small, not 12px */
  font-weight: 500;
  letter-spacing: 0.14px;
}

/* Outline / transparent variants — 12px horizontal padding for all sizes */
.btn--secondary,
.btn--tertiary,
.btn--destructive-secondary,
.btn--destructive-tertiary {
  padding-left: 12px;
  padding-right: 12px;
}

/* Icon-only: square dimensions, no horizontal padding (highest specificity) */
.btn--icon-only.btn--lg { width: 48px; padding: 0; }
.btn--icon-only.btn--md { width: 40px; padding: 0; }
.btn--icon-only.btn--sm { width: 32px; padding: 0; }

.btn--full-width {
  width: 100%;
}

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

/* Primary — solid brand fill */
.btn--primary {
  background: var(--fill-brand-default);
  color: var(--text-on-fill-white);
}
.btn--primary:hover:not(:disabled) {
  background: var(--fill-brand-dark);
}
.btn--primary:active:not(:disabled) {
  background: var(--fill-brand-dark);
  filter: brightness(0.92);
}
.btn--primary:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
}

/* Secondary — brand-tinted fill with brand border */
.btn--secondary {
  background: var(--fill-brand-transparent-mid);
  color: var(--text-primary);
  border-color: var(--border-brand-transparent-primary);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--fill-brand-transparent-strong);
}
.btn--secondary:active:not(:disabled) {
  background: var(--fill-brand-transparent-strong);
  filter: brightness(0.92);
}
.btn--secondary:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  border-color: var(--border-neutrals-disabled);
}

/* Tertiary — transparent fill, brand border, neutral text */
.btn--tertiary {
  background: transparent;
  color: var(--text-secondary);
  border-color: var(--border-brand-transparent-primary);
}
.btn--tertiary:hover:not(:disabled) {
  background: var(--fill-brand-transparent-subtle);
  color: var(--text-primary);
}
.btn--tertiary:active:not(:disabled) {
  background: var(--fill-brand-transparent-mid);
}
.btn--tertiary:disabled {
  color: var(--text-disabled);
  border-color: var(--border-neutrals-disabled);
}

/* Buy — solid green, locked to semantic (NOT partner-themeable) */
.btn--buy {
  background: var(--fill-buy-default);
  color: var(--text-on-fill-white);
}
.btn--buy:hover:not(:disabled) {
  background: var(--fill-buy-mid);
}
.btn--buy:active:not(:disabled) {
  background: var(--fill-buy-mid);
  filter: brightness(0.92);
}
.btn--buy:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
}

/* Sell — solid orange-red, locked to semantic */
.btn--sell {
  background: var(--fill-sell-default);
  color: var(--text-on-fill-white);
}
.btn--sell:hover:not(:disabled) {
  background: var(--fill-sell-mid);
}
.btn--sell:active:not(:disabled) {
  background: var(--fill-sell-mid);
  filter: brightness(0.92);
}
.btn--sell:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
}

/* Destructive Secondary — transparent error fill, error border, danger text */
.btn--destructive-secondary {
  background: var(--fill-error-warning-transparent);
  color: var(--text-danger);
  border-color: var(--border-error-transparent-primary);
}
.btn--destructive-secondary:hover:not(:disabled) {
  background: var(--border-error-transparent-secondary);
  border-color: var(--border-error-primary);
}
.btn--destructive-secondary:active:not(:disabled) {
  background: var(--fill-error-warning-mid);
  color: var(--text-on-fill-white);
  border-color: transparent;
}
.btn--destructive-secondary:disabled {
  background: var(--surface-disabled);
  color: var(--text-disabled);
  border-color: var(--border-neutrals-disabled);
}

/* Destructive Tertiary — transparent fill, subtle error border, danger text */
.btn--destructive-tertiary {
  background: transparent;
  color: var(--text-danger);
  border-color: var(--border-error-transparent-secondary);
}
.btn--destructive-tertiary:hover:not(:disabled) {
  background: var(--fill-error-warning-transparent);
  border-color: var(--border-error-transparent-primary);
}
.btn--destructive-tertiary:active:not(:disabled) {
  background: var(--fill-error-warning-mid);
  color: var(--text-on-fill-white);
  border-color: transparent;
}
.btn--destructive-tertiary:disabled {
  color: var(--text-disabled);
  border-color: var(--border-neutrals-disabled);
}

/* ─── Loading state ───────────────────────────────────────────────────────── */
.btn--loading .btn__content {
  opacity: 0;
}

.btn__spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}