:root {
  --wc-deepest: #061421;
  --wc-hero: #071829;
  --wc-main: #0a1e32;
  --wc-secondary: #0d263d;
  --wc-feature: #102e49;
  --wc-panel: #132f4a;
  --wc-cyan: #00d7f2;
  --wc-cyan-secondary: #25bfe3;
  --wc-copy: #ffffff;
  --wc-copy-muted: #c7d3df;
  --wc-plans: #eaf2f8;
  --wc-plans-copy: #102033;
  --wc-section-edge: clamp(42px, 5vw, 72px);
  --wc-plans-edge: clamp(78px, 10vw, 145px);

  /* Preserve the existing theme API while updating its palette. */
  --wc-athletic-navy: var(--wc-hero);
  --wc-athletic-ink: var(--wc-main);
  --wc-athletic-panel: var(--wc-panel);
  --wc-athletic-cyan: var(--wc-cyan);
  --wc-athletic-white: var(--wc-copy);
  --wc-athletic-muted: var(--wc-copy-muted);
  --wc-athletic-line: rgb(0 215 242 / 0.18);
}

html,
body {
  background: var(--wc-deepest);
}

#app-static-top {
  background:
    radial-gradient(
      ellipse at 72% 34%,
      rgb(0 215 242 / 0.055) 0%,
      transparent 42%
    ),
    linear-gradient(90deg, transparent 0 67%, rgb(0 215 242 / 0.035) 67%),
    var(--wc-hero);
}

.athletic-ticker {
  background: var(--wc-cyan);
  border-color: var(--wc-hero);
  color: var(--wc-hero);
}

.athletic-stats {
  background: var(--wc-secondary);
}

#root > div {
  background: var(--wc-deepest);
}

/*
 * Section palette map
 * 01 recipes, 02 benefits, 03 urgency, 04 audience,
 * 05 testimonials, 06 application, 07 bonuses, 08 plans,
 * 09 guarantee, 10 access, 11 FAQ, 12 footer.
 */
#root > div > .cv-auto:nth-of-type(1) {
  --wc-section-from: var(--wc-secondary);
  --wc-section-base: var(--wc-main);
  --wc-section-to: var(--wc-secondary);
}

#root > div > .cv-auto:nth-of-type(2) {
  --wc-section-from: var(--wc-main);
  --wc-section-base: var(--wc-secondary);
  --wc-section-to: var(--wc-hero);
}

#root > div > .cv-auto:nth-of-type(3) {
  --wc-section-from: var(--wc-secondary);
  --wc-section-base: var(--wc-hero);
  --wc-section-to: var(--wc-feature);
  --wc-section-glow: 0.085;
}

#root > div > .cv-auto:nth-of-type(4) {
  --wc-section-from: var(--wc-hero);
  --wc-section-base: var(--wc-feature);
  --wc-section-to: var(--wc-main);
  --wc-section-glow: 0.07;
}

#root > div > .cv-auto:nth-of-type(5) {
  --wc-section-from: var(--wc-feature);
  --wc-section-base: var(--wc-main);
  --wc-section-to: var(--wc-secondary);
}

#root > div > .cv-auto:nth-of-type(6) {
  --wc-section-from: var(--wc-main);
  --wc-section-base: var(--wc-secondary);
  --wc-section-to: var(--wc-hero);
}

#root > div > .cv-auto:nth-of-type(7) {
  --wc-section-from: var(--wc-secondary);
  --wc-section-base: var(--wc-hero);
  --wc-section-to: var(--wc-plans);
}

#root > div > .cv-auto:nth-of-type(9) {
  --wc-section-from: var(--wc-hero);
  --wc-section-base: var(--wc-hero);
  --wc-section-to: var(--wc-secondary);
}

#root > div > .cv-auto:nth-of-type(10) {
  --wc-section-from: var(--wc-hero);
  --wc-section-base: var(--wc-secondary);
  --wc-section-to: var(--wc-hero);
}

#root > div > .cv-auto:nth-of-type(11) {
  --wc-section-from: var(--wc-secondary);
  --wc-section-base: var(--wc-hero);
  --wc-section-to: var(--wc-deepest);
}

#root > div > .cv-auto:not(:nth-of-type(7)):not(:nth-of-type(8)):not(:nth-of-type(12)) > section {
  border-color: rgb(0 215 242 / 0.16);
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgb(0 215 242 / 0.05) 0%,
      rgb(0 215 242 / 0.018) 34%,
      transparent 68%
    ),
    radial-gradient(
      ellipse at 50% 100%,
      rgb(0 215 242 / var(--wc-section-glow, 0.035)) 0%,
      transparent 65%
    ),
    linear-gradient(
      180deg,
      var(--wc-section-from) 0%,
      var(--wc-section-base) var(--wc-section-edge),
      var(--wc-section-base) calc(100% - var(--wc-section-edge)),
      var(--wc-section-to) 100%
    ) !important;
}

/* Dark-to-light transition leading into the plans. */
#root > div > .cv-auto:nth-of-type(7) > section {
  border-color: rgb(0 215 242 / 0.16);
  background:
    radial-gradient(
      ellipse at 50% 90%,
      rgb(0 215 242 / 0.06) 0%,
      transparent 56%
    ),
    linear-gradient(
      180deg,
      var(--wc-secondary) 0%,
      var(--wc-hero) var(--wc-section-edge),
      var(--wc-hero) calc(100% - var(--wc-plans-edge)),
      #0d263d calc(100% - 74px),
      #29485f calc(100% - 50px),
      #91a9b9 calc(100% - 25px),
      var(--wc-plans) 100%
    ) !important;
}

/* Light plans surface and a gradual return to the dark guarantee section. */
#planos {
  background:
    linear-gradient(
      180deg,
      var(--wc-plans) 0%,
      var(--wc-plans) calc(100% - var(--wc-plans-edge)),
      #afc1cf calc(100% - 76px),
      #416078 calc(100% - 48px),
      var(--wc-secondary) calc(100% - 22px),
      var(--wc-hero) 100%
    ) !important;
  border-color: rgb(16 46 73 / 0.12);
  color: var(--wc-plans-copy);
}

#planos .wheychef-plans-header h2,
#planos .wheychef-offer-body h3,
#planos .wheychef-main-price,
#planos .wheychef-price-period,
#planos .wheychef-plans-footer > p {
  color: var(--wc-plans-copy);
}

#planos .wheychef-offer-card {
  background: #ffffff;
  border-color: rgb(16 46 73 / 0.12);
  box-shadow: 0 18px 45px rgb(7 24 41 / 0.12);
}

#planos .wheychef-offer-card--featured {
  border-color: var(--wc-cyan);
}

#planos .wheychef-plans-footer ul {
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 1px 2px rgb(6 20 33 / 0.72);
}

#planos .wheychef-plans-footer li {
  opacity: 1;
}

#root .wheychef-audience-section,
#root .wheychef-routine-section {
  background-color: transparent;
}

#root .wheychef-audience-card,
#root .wheychef-routine-card {
  border-color: rgb(0 215 242 / 0.24);
  background:
    linear-gradient(145deg, rgb(0 215 242 / 0.055), transparent 52%),
    var(--wc-panel);
}

#root .wheychef-audience-icon,
#root .wheychef-routine-icon {
  border-color: rgb(0 215 242 / 0.32);
  background: rgb(0 215 242 / 0.12);
  color: var(--wc-cyan);
}

#root section:not(#planos) .text-muted-foreground,
#root .wheychef-audience-copy p,
#root .wheychef-routine-copy p {
  color: var(--wc-copy-muted);
}

#root footer {
  background: var(--wc-deepest);
  border-color: rgb(0 215 242 / 0.14);
}

@media (max-width: 520px) {
  :root {
    --wc-section-edge: 34px;
    --wc-plans-edge: 78px;
  }

  #root > div > .cv-auto:not(:nth-of-type(7)):not(:nth-of-type(8)):not(:nth-of-type(12)) > section {
    background:
      radial-gradient(
        ellipse at 50% 0%,
        rgb(0 215 242 / 0.035) 0%,
        transparent 62%
      ),
      radial-gradient(
        ellipse at 50% 100%,
        rgb(0 215 242 / 0.025) 0%,
        transparent 62%
      ),
      linear-gradient(
        180deg,
        var(--wc-section-from) 0%,
        var(--wc-section-base) var(--wc-section-edge),
        var(--wc-section-base) calc(100% - var(--wc-section-edge)),
        var(--wc-section-to) 100%
      ) !important;
  }

  #root > div > .cv-auto:nth-of-type(7) > section {
    background:
      radial-gradient(
        ellipse at 50% 94%,
        rgb(0 215 242 / 0.04) 0%,
        transparent 58%
      ),
      linear-gradient(
        180deg,
        var(--wc-secondary) 0%,
        var(--wc-hero) var(--wc-section-edge),
        var(--wc-hero) calc(100% - var(--wc-plans-edge)),
        #29485f calc(100% - 38px),
        #91a9b9 calc(100% - 19px),
        var(--wc-plans) 100%
      ) !important;
  }

  #planos {
    background:
      linear-gradient(
        180deg,
        var(--wc-plans) 0%,
        var(--wc-plans) calc(100% - var(--wc-plans-edge)),
        #afc1cf calc(100% - 48px),
        #416078 calc(100% - 28px),
        var(--wc-secondary) calc(100% - 13px),
        var(--wc-hero) 100%
      ) !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --wc-athletic-muted: #dbe5ee;
    --wc-copy-muted: #dbe5ee;
    --wc-athletic-line: rgb(0 215 242 / 0.32);
  }
}