/* =========================
   BUTTON SYSTEM
========================= */

:root {
  --tm-button-hover-lift: -2px;
  --tm-button-active-lift: 0px;
}

.tm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: var(--tm-radius-pill);
  font-size: var(--tm-font-size-sm);
  font-weight: var(--tm-weight-semibold);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-shadow: none;
  transform: translateY(0);
  transition:
    transform var(--tm-transition-fast),
    background-color var(--tm-transition-fast),
    border-color var(--tm-transition-fast),
    color var(--tm-transition-fast),
    box-shadow var(--tm-transition-fast);
}

.tm-btn:hover {
  transform: translateY(var(--tm-button-hover-lift));
}

.tm-btn:active {
  transform: translateY(var(--tm-button-active-lift));
}

.tm-btn:focus-visible {
  outline: none;
  box-shadow: var(--tm-focus-ring);
}

/* =========================
   VARIANTS
========================= */

.tm-btn-primary,
.tm-btn-blue {
  background: var(--tm-color-primary);
  color: var(--tm-color-white);
  box-shadow: 0 10px 24px rgba(37, 99, 235, .20);
}

.tm-btn-primary:hover,
.tm-btn-blue:hover {
  background: var(--tm-color-primary-hover);
  color: var(--tm-color-white);
  box-shadow: 0 13px 30px rgba(37, 99, 235, .24);
}

.tm-btn-secondary,
.tm-btn-light {
  background: var(--tm-color-white);
  color: var(--tm-color-text);
  border-color: var(--tm-color-border-strong);
  box-shadow: none;
}

.tm-btn-secondary:hover,
.tm-btn-light:hover {
  background: var(--tm-color-surface-soft);
  color: var(--tm-color-text);
  border-color: #94a3b8;
  box-shadow: none;
}

.tm-btn-dark {
  background: var(--tm-color-navy);
  color: var(--tm-color-white);
  box-shadow: 0 10px 24px rgba(15, 23, 42, .16);
}

.tm-btn-dark:hover {
  background: #020617;
  color: var(--tm-color-white);
  box-shadow: 0 13px 30px rgba(15, 23, 42, .20);
}

.tm-btn-white {
  background: var(--tm-color-white);
  color: var(--tm-color-text);
  box-shadow: 0 14px 34px rgba(255, 255, 255, .12);
}

.tm-btn-white:hover {
  background: var(--tm-color-surface-soft);
  color: var(--tm-color-text);
}

.tm-btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, .45);
  color: var(--tm-color-white);
}

.tm-btn-outline:hover {
  border-color: rgba(255, 255, 255, .72);
  color: var(--tm-color-white);
  background: rgba(255, 255, 255, .08);
}

.tm-btn-lg {
  min-height: 60px;
  padding-inline: 30px;
  font-size: 1rem;
}

/* =========================
   SHARED INTERACTION
========================= */

.tm-form button,
.tm-check-form button,
.tm-report-cta-button-primary {
  transform: translateY(0);
  transition:
    transform var(--tm-transition-fast),
    background-color var(--tm-transition-fast),
    border-color var(--tm-transition-fast),
    color var(--tm-transition-fast),
    box-shadow var(--tm-transition-fast);
}

.tm-form button:hover,
.tm-check-form button:hover,
.tm-report-cta-button-primary:hover {
  transform: translateY(var(--tm-button-hover-lift));
}

.tm-form button:active,
.tm-check-form button:active,
.tm-report-cta-button-primary:active {
  transform: translateY(var(--tm-button-active-lift));
}

/* =========================
   STATES
========================= */

.tm-btn:disabled,
.tm-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}

/* =========================
   BUTTON GROUPS
========================= */

.tm-actions,
.tm-section-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* =========================
   MOBILE
========================= */

@media (max-width: 640px) {
  .tm-btn,
  .tm-btn-lg {
    min-height: 54px;
    padding-inline: 22px;
  }

  .tm-actions,
  .tm-section-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .tm-actions .tm-btn,
  .tm-section-actions .tm-btn {
    width: 100%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .tm-btn,
  .tm-form button,
  .tm-check-form button,
  .tm-report-cta-button-primary {
    transition: none;
  }

  .tm-btn:hover,
  .tm-btn:active,
  .tm-form button:hover,
  .tm-form button:active,
  .tm-check-form button:hover,
  .tm-check-form button:active,
  .tm-report-cta-button-primary:hover,
  .tm-report-cta-button-primary:active {
    transform: none;
  }
}