/**
 * Block: btn (Potiseg design system — classes utilitárias em grid-utilities.css na home)
 * Modifiers: --primary, --secondary, --outline-light, --hero, --cta-inverse
 * States: :hover, :focus-visible, :disabled, .is-loading
 */
.btn-ds {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
  transition: box-shadow var(--transition-slow), background var(--transition-slow), color var(--transition-base),
    transform var(--transition-base), border-color var(--transition-base);
  border: none;
  font-size: var(--font-size-lg);
  padding: 0.75rem 1.75rem;
}

.btn-ds:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

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

/* Primary = solid green gradient */
.btn-ds--primary {
  background: var(--color-gradient-primary);
  color: var(--color-neutral-0) !important;
  box-shadow: 0 4px 16px rgba(58, 170, 53, 0.1);
}

.btn-ds--primary:hover {
  filter: brightness(1.05);
  transform: scale(1.03);
  color: var(--color-neutral-0) !important;
}

.btn-ds--primary .potiseg-icon {
  color: inherit !important;
}

/* Secondary = glass mint */
.btn-ds--secondary {
  background: linear-gradient(120deg, #e6fbe7 0%, #c6f7d4 100%);
  color: var(--color-primary-dark) !important;
  box-shadow: 0 4px 24px rgba(58, 170, 53, 0.1);
}

.btn-ds--secondary:hover {
  background: linear-gradient(120deg, #c6f7d4 0%, #e6fbe7 100%);
  color: var(--color-text-heading) !important;
  transform: scale(1.03);
}

/* Outline em fundos escuros — texto/borda com verde escuro para ≥4.5:1 sobre branco (AA) */
.btn-ds--outline-light {
  background: var(--color-neutral-0);
  color: var(--color-primary-dark) !important;
  border: var(--border-width-medium) solid var(--color-primary-dark);
  box-shadow: 0 4px 16px rgba(58, 170, 53, 0.1);
}

.btn-ds--outline-light:hover {
  background: var(--color-primary-dark);
  color: var(--color-neutral-0) !important;
  border-color: var(--color-primary-dark);
}

.btn-ds--outline-light .potiseg-icon {
  color: inherit !important;
}

/* Hero CTA */
.btn-ds--hero {
  background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #228022 100%);
  color: var(--color-neutral-0) !important;
  box-shadow: 0 0 16px 2px rgba(58, 170, 53, 0.45);
  padding: 0.875rem 2rem;
  font-size: 1.15em;
}

.btn-ds--hero:hover {
  background: var(--color-primary-dark);
  color: var(--color-neutral-0) !important;
  transform: scale(1.04);
  box-shadow: 0 0 32px 4px rgba(58, 170, 53, 0.45);
}

.btn-ds--hero .potiseg-icon {
  color: inherit !important;
}

/* Align legacy Bootstrap buttons with tokens where class applied */
.btn.btn-ds-legacy-success {
  background: var(--color-gradient-primary);
  color: var(--color-neutral-0) !important;
  border: none;
  border-radius: var(--radius-pill);
  font-weight: var(--font-weight-bold);
}

.btn.btn-ds-legacy-success:hover {
  filter: brightness(1.05);
  color: var(--color-neutral-0) !important;
}