.ms-button {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--ms-radius-md);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--ms-font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  gap: var(--ms-space-2);
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  text-decoration: none;
  transition: background-color var(--ms-duration-fast) var(--ms-ease-standard), border-color var(--ms-duration-fast) var(--ms-ease-standard), color var(--ms-duration-fast) var(--ms-ease-standard), transform var(--ms-duration-fast) var(--ms-ease-standard);
}

.ms-button--primary {
  background: var(--ms-color-action-primary);
  color: var(--ms-color-white);
}

.ms-button--primary:hover {
  background: var(--ms-color-action-primary-hover);
  color: var(--ms-color-white);
}

.ms-button--secondary {
  background: var(--ms-color-white);
  border-color: var(--ms-color-border);
  color: var(--ms-color-neutral-950);
}

.ms-button--secondary:hover {
  border-color: var(--ms-color-neutral-400);
  color: var(--ms-color-brand-600);
}

.ms-button--large {
  min-height: 3.5rem;
  padding-inline: 1.5rem;
}

.ms-form-control {
  appearance: none;
  background: var(--ms-color-white);
  border: 1px solid var(--ms-color-neutral-300);
  border-radius: var(--ms-radius-sm);
  color: var(--ms-color-neutral-900);
  min-height: 3rem;
  padding: 0.75rem 1rem;
  width: 100%;
}

.ms-form-control[aria-invalid="true"] {
  border-color: var(--ms-color-error);
}

@media (hover: hover) {
  .ms-button:not([disabled]):hover { transform: translateY(-1px); }
}