/* Candosa gradients.
   Soft multi-stop radial blends sit behind hero copy and section content (blurred
   60–90px in use). The brand gradient powers the CTA band. The named washes below
   reconstruct candosa.com's palette pairings (lilac + pink + sky, etc). */

:root {
  /* ---- Hero glow — lilac + pink + sky, blown out & airy ---- */
  --grad-hero:
    radial-gradient(60% 70% at 20% 15%, var(--lilac) 0%, transparent 60%),
    radial-gradient(55% 65% at 85% 25%, var(--pink) 0%, transparent 62%),
    radial-gradient(60% 70% at 60% 90%, var(--sky) 0%, transparent 60%);

  /* ---- Section glow — same family, slightly cooler ---- */
  --grad-section:
    radial-gradient(50% 60% at 12% 20%, var(--lilac) 0%, transparent 60%),
    radial-gradient(50% 60% at 88% 30%, var(--sky) 0%, transparent 60%),
    radial-gradient(60% 70% at 50% 100%, var(--pink) 0%, transparent 60%);

  /* ---- Cool wash — lilac + pink + sky, low intensity ---- */
  --grad-cool:
    radial-gradient(70% 80% at 30% 0%, var(--lilac) 0%, transparent 55%),
    radial-gradient(60% 70% at 100% 40%, var(--sky) 0%, transparent 55%);

  /* ---- Soft wash — pink + sky + lilac ---- */
  --grad-soft:
    radial-gradient(60% 70% at 80% 10%, var(--pink) 0%, transparent 60%),
    radial-gradient(60% 70% at 10% 60%, var(--sky) 0%, transparent 55%),
    radial-gradient(50% 60% at 60% 100%, var(--lilac) 0%, transparent 55%);

  /* ---- CTA band — peach + pink + violet + magenta over brand orange ----
     NOTE: this token ends in a solid color layer (var(--purple)), which is only
     valid in the `background` shorthand — apply it as `background: var(--grad-cta)`,
     never `background-image: var(--grad-cta)` (the trailing color voids the whole rule). */
  --grad-cta:
    radial-gradient(40% 80% at 8% 20%, var(--peach) 0%, transparent 55%),
    radial-gradient(45% 90% at 35% 110%, var(--pink) 0%, transparent 60%),
    radial-gradient(50% 90% at 80% -10%, var(--lilac) 0%, transparent 55%),
    radial-gradient(45% 90% at 100% 80%, #E24CC4 0%, transparent 55%),
    var(--purple);
}