/* Preview 23: the approved cyan + pink background direction.
   Exact brand colours come from brand-tokens.json; pale tones are mixed with white.
   Readable surfaces, type, composition and motion stay inherited from preview 22. */

/* Warm introduction, with cyan carrying the existing robot illustration. */
[data-theme=C] .color-preview .about {
  background:linear-gradient(116deg,#fff3f8 0%,#ffe3ef 58%,#ffd3e6 100%);
}
[data-theme=C] .color-preview .about-orbit {
  background:linear-gradient(140deg,#a2edff 3%,var(--cyan) 58%,var(--blue) 120%);
}

/* Broad colour fields behind the white cards; navy anchors the heading and links. */
[data-theme=C] .color-preview .services:after {
  background:
    radial-gradient(ellipse at 104% 16%,#00c8ff 0%,#00c8ffb0 18%,#00c8ff00 48%),
    radial-gradient(ellipse at -5% 61%,#ff6faeda 0%,#ff6fae6b 20%,#ff6fae00 42%),
    linear-gradient(135deg,var(--navy) 30%,#2548b2 68%,var(--navy) 100%);
}
.color-preview .case-shortcuts a { color:#f0f5ff; }

/* Space to follow Compass, between the stronger service and FAQ colours. */
[data-theme=C] .color-preview .flow {
  background:linear-gradient(138deg,#e5faff 0%,var(--paper) 34%,#fff2f8 72%,#ffe2ef 100%);
}
[data-theme=C] .color-preview .faq,
[data-theme=C] .color-preview .faq:before {
  background:linear-gradient(110deg,#d5f7ff 0%,#afedff 100%);
}

/* The final invitation moves from warm light to the brand pink. */
[data-theme=C] .color-preview .contact {
  background:linear-gradient(115deg,#fff0ba 0%,#ffd6d5 46%,#ff98c2 100%);
}

@media(max-width:700px) {
  [data-theme=C] .color-preview .about {
    background:linear-gradient(160deg,#fff3f8 0%,#ffe3ef 55%,#ffcce1 100%);
  }
  [data-theme=C] .color-preview .services:after {
    background:
      radial-gradient(ellipse at 115% 18%,#00c8ffcc 0%,#00c8ff66 18%,#00c8ff00 43%),
      radial-gradient(ellipse at -28% 59%,#ff6faee6 0%,#ff6fae80 20%,#ff6fae00 46%),
      linear-gradient(155deg,var(--navy) 20%,#2548b2 65%,var(--navy) 100%);
  }
  [data-theme=C] .color-preview .flow {
    background:linear-gradient(168deg,#e5faff 0%,var(--paper) 34%,#fff2f8 70%,#ffe2ef 100%);
  }
  [data-theme=C] .color-preview .contact {
    background:linear-gradient(145deg,#fff0ba 0%,#ffd6d5 39%,#ff98c2 100%);
  }
}