/* =========================================================================
   TT Button — labels always start with a verb (Book Transfer, Get Quote).
   Variants: primary | secondary | ghost | success | danger
   Sizes:    sm | (default) | lg | xl
   ========================================================================= */
.tt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--tt-space-8);
  min-height: var(--tt-tap-min);
  padding: var(--tt-space-16) var(--tt-space-24);
  font-family: var(--tt-font-heading);
  font-weight: var(--tt-fw-semibold);
  font-size: var(--tt-fs-small);
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--tt-radius-md);
  cursor: pointer;
  text-align: center;
  transition: background-color var(--tt-duration) var(--tt-ease),
              border-color var(--tt-duration) var(--tt-ease),
              box-shadow var(--tt-duration) var(--tt-ease),
              transform var(--tt-duration) var(--tt-ease);
}
.tt-btn:active { transform: translateY(1px); }
.tt-btn:disabled, .tt-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.tt-btn svg { width: 20px; height: 20px; }

/* Variants */
.tt-btn--primary   { background: var(--tt-color-primary); color: var(--tt-color-text-invert); }
.tt-btn--primary:hover   { background: var(--tt-color-primary-hover); box-shadow: var(--tt-shadow-2); }
.tt-btn--secondary { background: var(--tt-color-bg); color: var(--tt-color-primary); border-color: var(--tt-color-primary); }
.tt-btn--secondary:hover { background: var(--tt-color-surface); }
.tt-btn--ghost     { background: transparent; color: var(--tt-color-primary); }
.tt-btn--ghost:hover     { background: var(--tt-color-surface); }
.tt-btn--success   { background: var(--tt-color-secondary); color: var(--tt-color-text-invert); }
.tt-btn--success:hover   { background: var(--tt-color-secondary-hover); }
.tt-btn--danger    { background: var(--tt-color-danger); color: var(--tt-color-text-invert); }

/* Sizes */
.tt-btn--sm { min-height: 40px; padding: var(--tt-space-12) var(--tt-space-16); }
.tt-btn--lg { font-size: var(--tt-fs-body); padding: var(--tt-space-16) var(--tt-space-32); }
.tt-btn--xl { font-size: var(--tt-fs-body-lg); padding: var(--tt-space-24) var(--tt-space-40); }
.tt-btn--block { display: flex; width: 100%; }