/* Buttons ------------------------------------------------------------------
   .pw-btn + one variant: --primary | --secondary | --tint | --quiet | --danger
   Sizes: default 44px, --sm 36px. --icon for square icon-only buttons.
   ------------------------------------------------------------------------ */

.pw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--control-h);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: 600 var(--text-md)/1 var(--font-body);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.pw-btn:hover { text-decoration: none; }
.pw-btn:disabled, .pw-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.pw-btn--primary { background: var(--brand); color: var(--brand-ink); }
.pw-btn--primary:hover { background: var(--brand-hover); color: var(--brand-ink); }

.pw-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.pw-btn--secondary:hover { background: var(--surface-2); color: var(--ink); }

.pw-btn--tint { background: var(--brand-soft); color: var(--brand-text); }
.pw-btn--tint:hover { background: var(--brand); color: var(--brand-ink); }

.pw-btn--quiet { background: transparent; color: var(--ink-2); }
.pw-btn--quiet:hover { background: var(--surface-2); color: var(--ink); }

.pw-btn--danger { background: transparent; color: var(--crit); border-color: var(--line-2); }
.pw-btn--danger:hover { background: var(--crit-soft); color: var(--crit); }

.pw-btn--danger-solid { background: var(--crit); color: var(--crit-ink); }

.pw-btn--sm { height: var(--control-h-sm); padding: 0 14px; font-size: var(--text-sm); border-radius: 9px; }
.pw-btn--icon { width: var(--control-h); padding: 0; }
.pw-btn--sm.pw-btn--icon { width: var(--control-h-sm); }
.pw-btn--block { width: 100%; }

.pw-btn__dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px;
  border-radius: var(--radius-pill);
  background: var(--crit);
  border: 2px solid var(--surface);
}
.pw-btn--has-dot { position: relative; }