:root {
  --site-gray: #212529;
  --site-pink: #e84b6d;
  --site-yellow: #ffea00;
  --site-blue: #0f1724;
}
.bg-blue {
  background-color: var(--site-blue);
}

.fg-blue {
  color: var(--site-blue);
}

.bg-pink {
  background-color: var(--site-pink);
  border-color: var(--site-pink);
}

.bg-pink:hover {
  color: var(--site-pink);
  background-color: white;
  border-color: var(--site-pink);
}
.fg-pink {
  color: var(--site-pink);
}

.bg-gray {
  background-color: var(--site-gray);
}

.fg-gray {
  color: var(--site-gray);
}

.bg-yellow {
  background-color: var(--site-yellow);
}

.fg-yellow {
  color: var(--site-yellow);
}

.bg-white {
  background-color: #fff;
}

.fg-white {
  color: #fff;
}

.bg-gradient-primary {
  background: linear-gradient(
    135deg,
    var(--site-pink) 0%,
    var(--site-yellow) 100%
  );
}

.bg-gradient-soft {
  background: linear-gradient(
    120deg,
    var(--site-pink) 0%,
    #f68b9f 45%,
    var(--site-yellow) 100%
  );
}

.bg-gradient-radial {
  background: radial-gradient(
    circle at top left,
    var(--site-yellow),
    var(--site-pink)
  );
}

.bg-gradient-overlay {
  position: relative;
  background: linear-gradient(135deg, var(--site-pink), var(--site-yellow));
}

.bg-gradient-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
}

.bg-gradient-overlay > * {
  position: relative;
  z-index: 1;
}

.bg-gradient-animate {
  background: linear-gradient(
    120deg,
    var(--site-pink),
    #b98149,
    var(--site-pink)
  );
  background-size: 200% 200%;
  animation: gradientMove 25s ease infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 30%;
  }
  50% {
    background-position: 100% 10%;
  }
  100% {
    background-position: 0% 50%;
  }
}