.btn {
  display: flex;
  align-items: center;
  justify-content: center;

  box-sizing: border-box;

  min-height: var(--card-control-height);

  padding: 0 var(--space-4);

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-sm);

  font-family: var(--font-ui);
  font-size: var(--font-md);
  font-weight: var(--font-weight-medium);

  cursor: pointer;
}

.btn:disabled {
  opacity: var(--disabled-opacity);
  cursor: not-allowed;
}

.btn-primary {
  background: var(--accent-brand);
  color: var(--bg-void);
}

.btn-ghost,
.btn-toggle,
.btn-outline {
  background: transparent;
  border-color: var(--border-hairline);
  color: var(--text-muted);
}

.btn-ghost:hover:not(:disabled),
.btn-toggle:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  background: var(--bg-raised);
  color: var(--text-primary);
}

/* Active toggle states */
.btn-toggle.active-danger {
  background: var(--accent-down);
  border-color: var(--accent-down);
  color: var(--bg-void);
}

.btn-toggle.active-warning {
  background: var(--accent-connecting);
  border-color: var(--accent-connecting);
  color: var(--bg-void);
}

/* Optional: active state hover */
.btn-toggle.active-danger:hover:not(:disabled) {
  background: var(--accent-down);
  border-color: var(--accent-down);
}

.btn-toggle.active-warning:hover:not(:disabled) {
  background: var(--accent-connecting);
  border-color: var(--accent-connecting);
}