/* Rediall marketing site: hues. Soft periwinkle, lavender and aqua light,
   taken from the hero's blue glow and carried through the page as subtle
   washes. Background-only: no layout, no motion. Light and dark each get
   their own strength. Loads after sections.css and workflow.css, before
   motion.css. */

:root {
  --hue-blue: 120 160 240;
  --hue-violet: 160 140 245;
  --hue-aqua: 120 200 230;
  --hue-strong: 0.22;
  --hue-soft: 0.11;
  --hue-card: 0.12;
}

:root[data-theme="dark"] {
  --hue-blue: 70 110 235;
  --hue-violet: 115 85 225;
  --hue-aqua: 40 150 200;
  --hue-strong: 0.26;
  --hue-soft: 0.13;
  --hue-card: 0.16;
}

/* ---------- hero: blue behind the art, lavender low on the left ---------- */

.hero-glow::before {
  background: radial-gradient(ellipse, rgb(var(--hue-blue) / var(--hue-strong)), transparent 65%);
}

.hero-glow::after {
  content: "";
  position: absolute;
  left: -12%;
  bottom: -18%;
  width: 58%;
  height: 520px;
  background: radial-gradient(ellipse, rgb(var(--hue-violet) / var(--hue-soft)), transparent 65%);
}

/* ---------- section washes: soft pools of light inside each section ----------
   Centres sit inside the section and each ellipse fades out before it reaches
   the top or bottom edge, so no wash ever shows a seam between sections. */

#demo {
  background:
    radial-gradient(40% 34% at 86% 50%, rgb(var(--hue-violet) / var(--hue-soft)), transparent 70%);
}

#features {
  background:
    radial-gradient(42% 28% at 88% 34%, rgb(var(--hue-blue) / var(--hue-soft)), transparent 70%),
    radial-gradient(36% 26% at 10% 72%, rgb(var(--hue-violet) / var(--hue-soft)), transparent 70%);
}

#languages {
  background:
    radial-gradient(40% 32% at 8% 46%, rgb(var(--hue-aqua) / var(--hue-soft)), transparent 70%),
    radial-gradient(34% 28% at 92% 66%, rgb(var(--hue-blue) / var(--hue-soft)), transparent 70%);
}

#faq {
  background:
    radial-gradient(46% 34% at 50% 46%, rgb(var(--hue-blue) / var(--hue-soft)), transparent 72%);
}

/* ---------- cards: a faint blue-to-lavender tint over the surface ---------- */

.tile,
.channel,
.workflow-panel,
.workflow-stage,
.demo-panel {
  background-image:
    radial-gradient(120% 90% at 100% 0%, rgb(var(--hue-blue) / var(--hue-card)), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgb(var(--hue-violet) / var(--hue-card)), transparent 65%);
}

/* ---------- closing panel + footer: same palette for their light ---------- */

.atmos .b1 {
  background: radial-gradient(closest-side, rgb(var(--hue-blue) / var(--hue-strong)), transparent);
}

.atmos .b2 {
  background: radial-gradient(closest-side, rgb(var(--hue-aqua) / var(--hue-soft)), transparent);
}

.atmos .b3 {
  background: radial-gradient(closest-side, rgb(var(--hue-violet) / var(--hue-soft)), transparent);
}

/* high-contrast modes: drop decorative light entirely */
@media (forced-colors: active) {
  .hero-glow::before,
  .hero-glow::after,
  #demo,
  #features,
  #languages,
  #faq,
  .tile,
  .channel,
  .workflow-panel,
  .workflow-stage,
  .demo-panel {
    background-image: none;
  }
}