/* Shared Wild Lily colours and decorative flower borders. */
:root {
  --floral-sage: #d5e0d1;
  --floral-sage-soft: #e4ebdf;
  --floral-rose: #ead2d9;
  --floral-rose-soft: #f1e0e3;
  --floral-ink: #35443a;
  --floral-berry: #704451;
  --floral-sprig: url("assets/botanical-sprig.svg");
}

body {
  background: var(--floral-rose-soft);
}

.site-header {
  background: #f5eaec;
}

.site-header .mobile-nav:not([hidden]) {
  background: #f5eaec;
}

:is(.welcome, .hero, .home-story, .founder-story, .how-section, .order-section, .next-step) {
  background: var(--floral-rose-soft);
}

:is(.home-workshops, .gifts-section, .workshop-intro, .arrangements, .story-section, .faq-section) {
  background: var(--floral-sage-soft);
}

:is(.connection-ribbon, .promise-strip, .footer),
.flower-parties .party-activities {
  background: var(--floral-sage);
}

:is(.connection-invite, .workshop-contact),
.flower-parties .party-contact {
  background: var(--floral-rose);
}

:is(.delivery-section, .dream-pause) {
  background: #516956;
}

:is(.welcome, .hero, .home-workshops, .home-story, .founder-story, .workshop-intro, .next-step, .privacy-page, .order-section) h1 em,
:is(.hero, .home-workshops, .home-story, .gifts-section, .founder-story, .arrangements, .story-section, .how-section, .order-section, .faq-section, .next-step, .workshop-contact, .party-activities) h2 em,
.welcome h1.welcome-tagline em {
  color: var(--floral-berry);
}

:is(.welcome-copy, .hero-copy, .order-copy, .privacy-page) > p:not(.eyebrow),
.footer .footer-grid p,
.footer .footer-grid > div:not(:first-child) :is(a, span),
.footer .footer-bottom {
  color: var(--floral-ink);
}

:is(main > section:not(.promise-strip), .privacy-page, .footer) {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

:is(main > section:not(.promise-strip), .privacy-page, .footer)::before,
:is(main > section:not(.promise-strip), .privacy-page, .footer)::after {
  content: "";
  display: block;
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: clamp(130px, 18vw, 250px);
  height: clamp(160px, 22vw, 310px);
  background: var(--floral-sprig) center / contain no-repeat;
}

:is(main > section:not(.promise-strip), .privacy-page, .footer)::before {
  inset: auto auto -34px -93px;
  transform: rotate(-16deg);
  opacity: .74;
}

:is(main > section:not(.promise-strip), .privacy-page, .footer)::after {
  inset: -18px -67px auto auto;
  transform: scaleX(-1) rotate(-12deg);
  opacity: .81;
}

:is(.delivery-section, .dream-pause)::before,
:is(.delivery-section, .dream-pause)::after {
  opacity: .9;
  filter: brightness(1.3) saturate(.9);
}

:is(.connection-invite, .workshop-contact, .dream-pause, .footer)::after {
  inset: auto -44px -34px auto;
}

@media (max-width: 700px) {
  :is(main > section:not(.promise-strip), .privacy-page, .footer)::before,
  :is(main > section:not(.promise-strip), .privacy-page, .footer)::after {
    width: 122px;
    height: 153px;
  }

  :is(main > section:not(.promise-strip), .privacy-page, .footer)::before {
    inset: auto auto -30px -53px;
    opacity: .4;
  }

  :is(main > section:not(.promise-strip), .privacy-page, .footer)::after {
    inset: -16px -51px auto auto;
    opacity: .56;
  }
}

/* Terracotta details echo the orange lilies while sage and rose frame the pages. */
:root {
  --floral-terracotta: #98502f;
  --floral-terracotta-hover: #7c3e27;
  --floral-lily: url("assets/terracotta-lily.svg");
}

main > section:is(.welcome, .party-hero, .founder-story, .hero, .workshop-intro)::after {
  background-image: var(--floral-lily);
}

.home-flourish {
  color: #ba754f;
}

:is(.welcome-actions, .hero-actions, .party-copy, .workshop-contact, .connection-invite) .button {
  background: var(--floral-terracotta);
  border-color: var(--floral-terracotta);
  color: #fffaf4;
}

:is(.welcome-actions, .hero-actions, .party-copy, .workshop-contact, .connection-invite) .button:is(:hover, :focus-visible) {
  background: var(--floral-terracotta-hover);
  border-color: var(--floral-terracotta-hover);
  color: #fffaf4;
}