/* ============================================================
   Rios Asset — ERP Design System
   BUTTONS — sistema canônico
   ============================================================
   Substitui os botões ad-hoc dos mocks (.v1-btn, .v2-btn, .v3-btn)
   por um único sistema com 3 tamanhos × 5 variantes (+ on-navy
   para superfícies escuras) + modificador icon-only.

   Filosofia:
   - Densidade ERP: alturas 28/32/40px. Default = 32.
   - Radius 3px (sóbrio, alinhado a inputs).
   - Primary (teal filled) reservado para UMA ação por tela.
     Maioria das ações é Secondary (white + border gray-200).
   - Gold é acento, não primário. Use em relatórios/demonstrativos.
   - On-navy: variantes especiais quando o botão SOBE numa
     superfície navy (sidebar, hero band). Não inverter o
     primary navy — fica invisível.
   ============================================================ */

.btn {
  /* base */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);                       /* 8px entre ícone e texto */
  font-family: var(--font-sans);
  font-weight: var(--fw-medium);
  letter-spacing: 0;
  line-height: 1;
  white-space: nowrap;
  border-radius: var(--radius-sm);        /* 3px */
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-1);
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    border-color    var(--dur-fast) var(--ease-standard),
    color           var(--dur-fast) var(--ease-standard);

  /* default size = md (32px) */
  height: 32px;
  padding: 0 14px;
  font-size: var(--text-base);            /* 13px */
}
.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.btn:disabled,
.btn[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}
.btn:active:not(:disabled) {
  transform: translateY(0.5px);
}
.btn > svg {
  flex: 0 0 auto;
  display: block;
}

/* ---------- SIZES ---------- */
.btn--sm {
  height: 28px;
  padding: 0 10px;
  font-size: var(--text-sm);              /* 12px */
  gap: var(--sp-2);                       /* 4px */
}
.btn--md {
  height: 32px;
  padding: 0 14px;
  font-size: var(--text-base);
}
.btn--lg {
  height: 40px;
  padding: 0 18px;
  font-size: var(--text-md);              /* 14px */
}

/* ---------- ICON-ONLY ---------- */
/* Aplicar junto com uma variante. Quadrado, sem padding lateral. */
.btn--icon { padding: 0; }
.btn--icon.btn--sm { width: 28px; }
.btn--icon.btn--md, .btn--icon:not(.btn--sm):not(.btn--lg) { width: 32px; }
.btn--icon.btn--lg { width: 40px; }

/* ============================================================
   VARIANTES — light mode (canônico)
   ============================================================ */

/* Primary — teal filled.
   USO: UMA por tela. Commit action central (Salvar, Lançar
   operação, Confirmar liquidação). Nunca em top bar de ações
   secundárias.
   NOTA: navy filled NÃO é usado como primary em superfície
   clara — pesa demais sobre o light mode. Navy fica reservado
   para sidebar, hero band e headers de tabela. Sobre navy,
   ver .btn--on-navy.btn--accent (gold filled). */
.btn--primary {
  background: var(--rios-teal);
  border-color: var(--rios-teal);
  color: var(--gray-0);
}
.btn--primary:hover:not(:disabled) {
  background: var(--rios-teal-deep);
  border-color: var(--rios-teal-deep);
}
.btn--primary:active:not(:disabled) {
  background: #174F5C;
  border-color: #174F5C;
}

/* Secondary — white com border gray-200.
   USO: padrão. Maior parte das ações da interface (filtros,
   exportar, voltar, abrir, ações de header). */
.btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--fg-1);
}
.btn--secondary:hover:not(:disabled) {
  background: var(--gray-50);
  border-color: var(--border-strong);
}
.btn--secondary:active:not(:disabled) {
  background: var(--gray-100);
}

/* Ghost — sem borda, sem fundo até hover.
   USO: terciário, grupos de chevrons, ícones isolados em
   barras densas (calendar nav). */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--fg-2);
}
.btn--ghost:hover:not(:disabled) {
  background: var(--gray-100);
  color: var(--fg-1);
}
.btn--ghost:active:not(:disabled) {
  background: var(--gray-150);
}

/* Gold — acento, white background com borda gold.
   USO: ações de relatório/demonstrativo/exportação premium.
   No máximo UMA por tela ao lado da Primary. */
.btn--gold {
  background: var(--bg-surface);
  border-color: var(--rios-gold);
  color: var(--rios-navy);
}
.btn--gold:hover:not(:disabled) {
  background: var(--rios-gold-soft);
  border-color: var(--rios-gold-warm);
}

/* Danger — vermelho semantic.
   USO: confirmação destrutiva (excluir, cancelar liquidação). */
.btn--danger {
  background: var(--neg);
  border-color: var(--neg);
  color: var(--gray-0);
}
.btn--danger:hover:not(:disabled) {
  background: #A82E3D;
  border-color: #A82E3D;
}

/* ============================================================
   ON-NAVY — quando o botão está sobre superfície navy
   (sidebar, hero band do V3, modal sobre overlay navy).
   Não usar primary navy aqui — some no fundo.
   ============================================================ */

/* Outline gold sobre navy — equivalente ao secondary, mas
   inverso. É o "default" sobre navy. */
.btn--on-navy {
  background: transparent;
  border-color: var(--border-on-navy);     /* gold @ 24% */
  color: var(--fg-on-navy);
}
.btn--on-navy:hover:not(:disabled) {
  background: rgba(201, 177, 122, 0.10);
  border-color: rgba(201, 177, 122, 0.55);
  color: var(--gray-0);
}

/* Ghost sobre navy — terciário. */
.btn--on-navy.btn--ghost {
  border-color: transparent;
  color: var(--fg-on-navy-2);              /* white @ 68% */
}
.btn--on-navy.btn--ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  color: var(--gray-0);
}

/* Gold filled sobre navy — equivalente à primary, mas
   usando gold (que é a cor de comando sobre navy). Use com
   parcimônia: a Primary canônica continua sendo teal filled
   no light. */
.btn--on-navy.btn--accent {
  background: var(--rios-gold);
  border-color: var(--rios-gold);
  color: var(--rios-navy-deep);
}
.btn--on-navy.btn--accent:hover:not(:disabled) {
  background: var(--rios-gold-warm);
  border-color: var(--rios-gold-warm);
}

/* ============================================================
   BUTTON GROUP — separador vertical para agrupar ações
   relacionadas sem encostar uma na outra.
   ============================================================ */
.btn-group {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);                        /* 4px */
}
.btn-group__sep {
  width: 1px;
  height: 18px;
  background: var(--border-default);
  margin: 0 var(--sp-2);
  flex: 0 0 1px;
}
.btn--on-navy ~ .btn-group__sep,
.btn-group--on-navy .btn-group__sep {
  background: rgba(255, 255, 255, 0.16);
}