/* buttons.css */

/* ---- BUTTONS ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--r-md);
  font-family: var(--f-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 120ms, color 120ms, border-color 120ms, box-shadow 120ms;
  white-space: nowrap;
  text-decoration: none;
}
.btn:focus-visible { outline: none; box-shadow: var(--s-focus); }
.btn-primary { background: var(--c-brand); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-brand-hover); }
.btn-primary:active { background: var(--c-brand-active); }
.btn-primary.is-disabled { background: var(--c-brand-disabled); cursor: not-allowed; }
.btn-secondary { background: var(--c-surface-strong); color: var(--c-ink); }
.btn-secondary:hover { background: var(--c-surface-sunken); }
.btn-outline { background: var(--c-canvas); color: var(--c-ink); border-color: var(--c-hairline-strong); }
.btn-outline:hover { border-color: var(--c-ink); }
.btn-ghost { background: transparent; color: var(--c-ink); }
.btn-ghost:hover { background: var(--c-surface-soft); }
.btn-danger { background: var(--c-canvas); color: var(--c-danger); border-color: var(--c-danger); }
.btn-danger:hover { background: var(--c-danger-soft); }
.btn-link { background: transparent; color: var(--c-brand); padding: 0; height: auto; }
.btn-link:hover { color: var(--c-brand-hover); text-decoration: underline; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 20px; font-size: 15px; }
.btn .ico { width: 14px; height: 14px; }