/* assets/css/components/buttons.css — Section styles and local responsive rules. */
.btn {
  position: relative;
  display: inline-flex;
  min-height: 48px;
  padding: 0.85rem 1.35rem;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: color var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.btn-primary {
  color: var(--color-text-dark);
  background: linear-gradient(
      135deg,
      var(--color-primary),
      var(--color-primary-hover)
    );
  border-color: var(--color-primary);
  box-shadow: var(--shadow-primary);
}
.btn-primary:hover {
  background: linear-gradient(
      135deg,
      var(--color-primary-hover),
      #ff8a4d
    );
  box-shadow: 0 16px 36px var(--color-border-primary-strong);
}
.btn-secondary { color: var(--color-text); background: var(--surface-inset); border-color: var(--color-border-strong); }
.btn-secondary:hover { color: var(--color-primary); background: var(--color-primary-soft); border-color: var(--color-border-primary); }
.btn-lg { min-height: 54px; padding: 1rem 1.65rem; font-size: var(--font-size-md); }
.btn-block { width: 100%; }
.button-group { display: flex; flex-wrap: wrap; gap: var(--space-3); }