/* ============================================================
   TALHÃO.AI — SISTEMA DE BOTÕES (fonte única da verdade)
   Hierarquia: Primary > Secondary > Ghost > Control > Chip
   ============================================================ */

:root {
  /* Tokens base */
  --btn-primary-bg:        #1f5230;
  --btn-primary-bg-hover:  #2a6b3f;
  --btn-primary-bg-active: #174023;
  --btn-primary-border:    #1a4529;
  --btn-primary-text:      #ffffff;
  --btn-primary-shadow:    0 1px 3px rgba(31, 82, 48, 0.30);
  --btn-primary-shadow-hover: 0 4px 12px rgba(31, 82, 48, 0.28);

  --btn-secondary-bg:        rgba(255, 255, 255, 0.80);
  --btn-secondary-bg-hover:  rgba(255, 255, 255, 0.96);
  --btn-secondary-border:    rgba(22, 33, 19, 0.15);
  --btn-secondary-border-hover: rgba(22, 33, 19, 0.26);
  --btn-secondary-text:      #162113;
  --btn-secondary-shadow:    0 1px 2px rgba(22, 33, 19, 0.05);
  --btn-secondary-shadow-hover: 0 2px 8px rgba(22, 33, 19, 0.10);

  --btn-chip-bg:           rgba(22, 33, 19, 0.05);
  --btn-chip-bg-hover:     rgba(22, 33, 19, 0.09);
  --btn-chip-bg-active:    rgba(31, 82, 48, 0.12);
  --btn-chip-border:       rgba(22, 33, 19, 0.14);
  --btn-chip-border-hover: rgba(22, 33, 19, 0.22);
  --btn-chip-border-active: rgba(31, 82, 48, 0.40);
  --btn-chip-text:         #162113;
  --btn-chip-text-active:  #1f5230;

  /* Aliases (mantém compatibilidade com código existente) */
  --button-bg-default:     var(--btn-secondary-bg);
  --button-bg-hover:       var(--btn-secondary-bg-hover);
  --button-bg-active:      var(--btn-chip-bg-active);
  --button-border-default: var(--btn-secondary-border);
  --button-border-hover:   var(--btn-secondary-border-hover);
  --button-border-active:  var(--btn-chip-border-active);
  --button-text-default:   var(--btn-secondary-text);
  --button-text-active:    var(--btn-chip-text-active);
  --button-shadow-default: var(--btn-secondary-shadow);
  --button-shadow-hover:   var(--btn-secondary-shadow-hover);
  --button-shadow-active:  var(--btn-secondary-shadow);
}

/* ── BASE COMPARTILHADA ── */
button, [role="button"] {
  font-family: var(--font-family-base);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease,
    transform 0.15s ease,
    box-shadow 0.15s ease,
    filter 0.15s ease;
}

/* ── PRIMARY — CTA principal ── */
.btn-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  border-radius: 11px;
  border: 1px solid var(--btn-primary-border);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 0.94rem;
  font-weight: 600;
  box-shadow: var(--btn-primary-shadow);
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  border-color: var(--btn-primary-border);
  box-shadow: var(--btn-primary-shadow-hover);
  transform: translateY(-1px);
  color: var(--btn-primary-text);
  filter: none;
}
.btn-primary:active {
  background: var(--btn-primary-bg-active);
  transform: translateY(0);
  box-shadow: var(--btn-primary-shadow);
  filter: none;
}
.btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 82, 48, 0.25), var(--btn-primary-shadow);
}

/* ── SECONDARY — Ações gerais e itens de lista ── */
.btn-secondary,
.action-button,
.ghost-button,
.download-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-size: 0.91rem;
  font-weight: 500;
  box-shadow: var(--btn-secondary-shadow);
  text-align: left;
}
.btn-secondary:hover,
.action-button:hover,
.ghost-button:hover,
.download-item:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  box-shadow: var(--btn-secondary-shadow-hover);
  transform: translateY(-1px);
  filter: none;
}
.btn-secondary:active,
.action-button:active,
.ghost-button:active,
.download-item:active {
  transform: translateY(0);
  box-shadow: var(--btn-secondary-shadow);
  filter: brightness(0.96);
}
.btn-secondary:focus-visible,
.action-button:focus-visible,
.download-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 82, 48, 0.18), var(--btn-secondary-shadow-hover);
}

/* action-button: centralizado (herdado de ghost) */
.action-button {
  justify-content: center;
  font-weight: 600;
  border-radius: 11px;
  margin-bottom: 8px;
}

/* download-item: espaçamento próprio */
.download-item {
  margin-bottom: 6px;
  border-radius: 10px;
  font: inherit;
}

/* ── SURFACE CTA — botões de contato e ação destacada em painel ── */
.btn-surface-cta,
.whatsapp-cta,
.file-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--btn-secondary-border);
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text);
  font-size: 0.91rem;
  font-weight: 600;
  box-shadow: none;
  text-align: center;
  text-decoration: none;
}
.btn-surface-cta:hover,
.whatsapp-cta:hover,
.file-button:hover {
  background: var(--btn-secondary-bg-hover);
  border-color: var(--btn-secondary-border-hover);
  box-shadow: none;
  transform: translateY(-1px);
  color: var(--btn-secondary-text);
  filter: none;
}
.btn-surface-cta:active,
.whatsapp-cta:active,
.file-button:active {
  transform: translateY(0);
  box-shadow: none;
  filter: brightness(0.98);
}
.btn-surface-cta:focus-visible,
.whatsapp-cta:focus-visible,
.file-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(31, 82, 48, 0.18);
}
.btn-surface-cta .icon,
.whatsapp-cta .icon,
.file-button .icon {
  color: var(--btn-chip-text-active);
}

/* ── CHIP / TOGGLE ── */
.filter-chip,
.basemap-thumb,
.view-source-option {
  border: 1px solid var(--btn-chip-border);
  background: var(--btn-chip-bg);
  color: var(--btn-chip-text);
  cursor: pointer;
  font-weight: 500;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.filter-chip:hover,
.basemap-thumb:hover,
.view-source-option:hover {
  background: var(--btn-chip-bg-hover);
  border-color: var(--btn-chip-border-hover);
  transform: translateY(-1px);
}
.filter-chip.active,
.basemap-thumb.active,
.view-source-option.is-active {
  background: var(--btn-chip-bg-active);
  border-color: var(--btn-chip-border-active);
  color: var(--btn-chip-text-active);
  font-weight: 600;
}