/* Each phase's sky behind a postcard until it's drawn (#503). Generated by scripts/build-web-postcards.mjs from
   docs/design/postcards/scene.mjs: don't edit it, run that. */

.sky-dawn {
  background: linear-gradient(to bottom, #E9C9B8 0%, #E9C9B8 38%, #F3DDCF 100%);
}

.sky-day {
  background: linear-gradient(to bottom, #CFDDE3 0%, #CFDDE3 38%, #DCE6EA 100%);
}

.sky-dusk {
  background: linear-gradient(to bottom, #3B2F4A 0%, #3B2F4A 38%, #C5776A 100%);
}

.sky-night {
  background: linear-gradient(to bottom, #141A2C 0%, #141A2C 38%, #1B2238 100%);
}

@media (prefers-color-scheme: dark) {
  .sky-dawn {
    background: linear-gradient(to bottom, #4A3C3A 0%, #4A3C3A 38%, #5A4842 100%);
  }

  .sky-day {
    background: linear-gradient(to bottom, #34424D 0%, #34424D 38%, #3C4A55 100%);
  }

  .sky-dusk {
    background: linear-gradient(to bottom, #2A2236 0%, #2A2236 38%, #6A4048 100%);
  }

  .sky-night {
    background: linear-gradient(to bottom, #141A2C 0%, #141A2C 38%, #1B2238 100%);
  }
}

/* The home page's hero (#503): the band's colour behind the words, and the title colour on it, in every scheme. */

.hero-dawn {
  background-color: #E9C9B8;
  color: #1E2A2B;
  --focus: #1E2A2B;
}

.hero-dawn .hero-mark-white {
  display: none;
}

:root:has(header.hero-dawn) {
  background-color: #E9C9B8;
}

.hero-day {
  background-color: #CFDDE3;
  color: #1E2A2B;
  --focus: #1E2A2B;
}

.hero-day .hero-mark-white {
  display: none;
}

:root:has(header.hero-day) {
  background-color: #CFDDE3;
}

.hero-dusk {
  background-color: #3B2F4A;
  color: #FFFFFF;
  --focus: #FFFFFF;
}

.hero-dusk .hero-mark-ink {
  display: none;
}

:root:has(header.hero-dusk) {
  background-color: #3B2F4A;
}

.hero-night {
  background-color: #141A2C;
  color: #FFFFFF;
  --focus: #FFFFFF;
}

.hero-night .hero-mark-ink {
  display: none;
}

:root:has(header.hero-night) {
  background-color: #141A2C;
}