/* Usado por Components/UI/Button.razor */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: var(--border-w) solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: var(--r);
  padding: 8px 14px; font-size: var(--fs-sm); font-weight: 500;
}
.btn:hover { border-color: var(--ink-2); }
.btn.primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn.primary:hover { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.accent { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.bad { background: var(--bad); border-color: var(--bad); color: #FFFFFF; }
.btn.bad:hover { filter: brightness(0.92); }
.btn.sm { padding: 5px 10px; font-size: var(--fs-xs); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.btn.ghost:hover { color: var(--ink); background: var(--surface-2); }