.ui-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--size-control-height-md);
  padding: 0 var(--space-7);
  gap: var(--space-5);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  text-align: center;
  text-decoration: none;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.ui-button:hover {
  background: var(--color-hover);
  border-color: var(--color-border-muted);
}

.ui-button:focus-visible {
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: var(--space-1);
}

.ui-button:active {
  background: var(--color-surface-secondary);
}

.ui-button:disabled,
.ui-button[aria-disabled="true"] {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}

.ui-button:disabled:hover,
.ui-button[aria-disabled="true"]:hover,
.ui-button:disabled:active,
.ui-button[aria-disabled="true"]:active {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.ui-button--primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.ui-button--primary:hover {
  border-color: var(--color-success);
  background: var(--color-success);
  color: var(--color-text-inverse);
}

.ui-button--primary:active {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.ui-button--secondary {
  border-color: var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.ui-button--secondary:hover {
  background: var(--color-hover);
  color: var(--color-text-primary);
}

.ui-button--secondary:active {
  background: var(--color-surface-secondary);
}

.ui-button--danger {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.ui-button--danger:hover {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.ui-button--danger:active {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

.ui-button--ghost {
  border-color: transparent;
  background: transparent;
  color: var(--color-text-primary);
}

.ui-button--ghost:hover {
  border-color: transparent;
  background: var(--color-hover);
}

.ui-button--ghost:active {
  background: var(--color-surface-secondary);
}

.ui-button--small {
  min-height: var(--size-control-height-sm);
  padding: 0 var(--space-6);
}

.ui-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: var(--size-icon-action-md);
  height: var(--size-icon-action-md);
  min-width: var(--size-icon-action-md);
  min-height: var(--size-icon-action-md);
  padding: 0;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text-primary);
  cursor: pointer;
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-md);
  text-align: center;
  user-select: none;
  vertical-align: middle;
  white-space: nowrap;
}

.ui-icon-button:hover {
  background: var(--color-hover);
  border-color: var(--color-border-muted);
}

.ui-icon-button:focus-visible {
  outline: var(--border-width) solid var(--color-focus);
  outline-offset: var(--space-1);
}

.ui-icon-button:active {
  background: var(--color-surface-secondary);
}

.ui-icon-button:disabled,
.ui-icon-button[aria-disabled="true"] {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
  color: var(--color-text-muted);
  cursor: default;
}

.ui-icon-button:disabled:hover,
.ui-icon-button[aria-disabled="true"]:hover,
.ui-icon-button:disabled:active,
.ui-icon-button[aria-disabled="true"]:active {
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.ui-icon-button > svg,
.ui-icon-button > img {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
}