/**
 * Soft section backgrounds — Coo & Cry
 * Edit palette values below; apply .bg-soft-* to sections.
 */

:root {
  /* Edit soft background palette here */
  --bg-soft-cream: #fffbf7;
  --bg-soft-warm: #f7f9fd;
  --bg-soft-blush: #fdf8f9;
  --bg-soft-sky: #f3f9fd;
  --bg-soft-lavender: #f8f7fc;
  --bg-soft-mint: #f6fbf9;
}

/* Base page wash (subtle, not flat) */
body {
  background: linear-gradient(
    180deg,
    var(--bg-soft-warm) 0%,
    #f4f7fb 45%,
    var(--bg-soft-sky) 100%
  );
}

.bg-soft-1 {
  background: linear-gradient(
    180deg,
    var(--bg-soft-cream) 0%,
    var(--bg-soft-warm) 55%,
    rgba(247, 249, 253, 0) 100%
  );
}

.bg-soft-2 {
  background: linear-gradient(
    180deg,
    rgba(247, 249, 253, 0) 0%,
    var(--bg-soft-blush) 40%,
    var(--bg-soft-warm) 100%
  );
}

.bg-soft-3 {
  background: linear-gradient(
    180deg,
    var(--bg-soft-warm) 0%,
    var(--bg-soft-sky) 50%,
    var(--bg-soft-lavender) 100%
  );
}

.bg-soft-4 {
  background: linear-gradient(
    180deg,
    var(--bg-soft-lavender) 0%,
    var(--bg-soft-mint) 45%,
    var(--bg-soft-warm) 100%
  );
}

/* Seamless section blends (no hard lines) */
.section-blend-top {
  position: relative;
}

.section-blend-top::before {
  content: "";
  position: absolute;
  top: -48px;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(to bottom, transparent, inherit);
  pointer-events: none;
  z-index: 0;
}