.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--font-primary);
  text-decoration: none;
  font-weight: 400;
  border-radius: 28px;
  padding: 10px 25px;
  margin: 10px 0;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
  min-width: 150px;
}

.btn img {
  width: 14px;
}

.btn.primary {
  background: var(--bg-primary-gradient);
  color: var(--text-inverse);
  border: var(--border-primary);
}

.btn.secondary {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-secondary);
}

.btn.border {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-primary);
}

.btn.fullwidth {
  width: 100%;
  margin-inline: auto;
}

.btn.gradient {
  background: var(--bg-primary-gradient);
  color: var(--text-inverse);
  border: var(--border-tertiary);
}

.btn.gradient:hover {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border: var(--border-primary);
}

.btn.variant {
  width: 125px;
  font-size: 12px;
  padding: 8px 12px;
}

.btn.variant-primary {
  background: #e7f5f6;
  color: #07c2d5;
}
.btn.variant-secondary {
  background: #fff7ed;
  color: #ff7b4c;
}

.btn.variant-tertiary {
  background: #f1f0fc;
  color: #785ecc;
}

.btn.variant-quaternary {
  background: #ebf0f3;
  color: #5a899d;
}

.btn.variant-success {
  background: var(--text-success);
  color: var(--text-inverse);
}

.btn.variant-danger {
  background: var(--text-danger);
  color: var(--text-inverse);
}

.btn.disabled {
  background: #ececec;
  color: var(--text-secondary);
  border: var(--border-secondary);
  cursor: not-allowed;
  pointer-events: none;
  opacity: 1; /* keep visual consistency */
  box-shadow: none;
}

.btn.login {
  padding: 8px 25px;
  margin-block: 20px;
  background: var(--bg-accent-3);
  transition: all 0.5s ease;
  min-width: fit-content;
}

.btn.login:hover {
  background: var(--bg-accent-1);
  color: var(--text-inverse);
}

/* Ripple circle */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  pointer-events: none;
  background: rgba(255, 255, 255, 0.35);
  animation: ripple 600ms ease-out;
}

/* Better contrast on light buttons */
.btn.secondary .ripple,
.btn.border .ripple,
.btn.variant .ripple,
.btn.gradient .ripple {
  background: rgba(0, 0, 0, 0.15);
}

@keyframes ripple {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Respect accessibility */
@media (prefers-reduced-motion: reduce) {
  .btn .ripple {
    animation: none;
  }
}

@media (max-width: 460px) {
  .btn.gradient {
    margin: 10px 0;
    padding: 6px 15px;
  }
}

/* Touch-friendly buttons */
@media (pointer: coarse) {
  .btn {
    min-height: 20px;
    min-width: 40px;
  }
}