CSS: Convert Positive value to Negative value

.bottom-box {
  margin-top: calc(-1 * 25px);
}

:root {
  --div-padding: 1rem;
  --div-height: 5rem;
  --div-radius: 10px;
  --margin-top: 25px;
  color: #fff;
}
.top-box {
  background: #98a491;
  max-width: 80vw;
  height: var(--div-height);
  padding: var(--div-padding);
  border-radius: var(--div-radius);
}

.bottom-box {
  background: #dbcab1;
  max-width: 80vw;
  margin: 0 auto;
  height: var(--div-height);
  padding: var(--div-padding);
  border-radius: var(--div-radius);
  margin-top: calc(-1 * var(--margin-top));
}

<div class="top-box">This is top box.</div>

<div class="bottom-box">This is bottom overlapping box.</div>