/* ============================================================
   Por & Prem — Wave 1 "Botanical Mint Invitation" skin
   ------------------------------------------------------------
   Applied to the CRITICAL PATH only (envelope · login gate ·
   launch home A · RSVP form + confirmation · Event Details ·
   bottom nav) via a `.pp-bm` scope class on the page root.

   HOW IT WORKS
   - The 9 approved colours live ONCE as `--pp-bm-*` tokens.
   - `.pp-bm` re-points the existing BLOOM design tokens
     (`--color-*`) at the mint palette, so every component that
     already uses `var(--color-*)` adopts Botanical Mint with no
     per-file hardcoding. New hex codes are NOT scattered.
   - Decorative colours (dusty rose / yellow / peach / lavender)
     are used ONLY for florals + accents — never body text.

   CONTRAST (on ivory paper #FFFEFA ≈ white):
     leaf   #2F6258 → 6.99:1 (AAA)  · text + CTA
     rose   #8C4C55 → 6.41:1 (AAA)  · emphasis text + CTA
     ink    #4E433E → 9.55:1 (AAA)  · body
     ink-2  #6E625C → 5.90:1 (AA)   · secondary body
     white on leaf CTA  → 6.99:1 (AAA)
     white on rose CTA  → 6.41:1 (AAA)
   ============================================================ */

:root {
  --pp-bm-mint: #c3d8d1; /* canvas */
  --pp-bm-ivory: #fffefa; /* paper / cards */
  --pp-bm-leaf: #2f6258; /* primary / CTA / leaf text */
  --pp-bm-leaf-deep: #274f47; /* heading emphasis */
  --pp-bm-ink: #4e433e; /* body ink */
  --pp-bm-ink-soft: #6e625c; /* secondary body (AA) */
  --pp-bm-rose: #8c4c55; /* rose CTA / emphasis text */
  --pp-bm-dusty: #ce9493; /* decoration only */
  --pp-bm-yellow: #f9d289; /* decoration only */
  --pp-bm-peach: #da9b93; /* decoration only */
  --pp-bm-lavender: #aaa8d6; /* decoration only */

  /* Derived soft tints (mint / rose washes for panels + hairlines) */
  --pp-bm-mint-soft: #e7f0ec;
  --pp-bm-mint-2: #8fbfac;
  --pp-bm-rose-soft: #f6e8e7;
  --pp-bm-hairline: rgba(47, 98, 88, 0.18);
}

/* ============================================================
   1. Token remap — the whole recolour happens here.
   ============================================================ */
.pp-bm {
  /* Backgrounds — canvas is mint, paper/cards stay ivory */
  --color-ivory: var(--pp-bm-ivory);
  --color-ivory-warm: #fbf6ef;
  --color-ivory-shadow: var(--pp-bm-mint-soft);
  --color-paper-pure: #ffffff;
  --color-paper: var(--pp-bm-ivory);
  --color-paper-cool: #fbf6ef;
  --color-paper-shadow: var(--pp-bm-mint-soft);
  --color-cream: var(--pp-bm-ivory);
  --color-petal-bg: var(--pp-bm-rose-soft);
  --color-pear-frost: var(--pp-bm-mint-soft);
  --color-bg-elevated: var(--pp-bm-ivory);
  --color-bg: var(--pp-bm-mint);
  --color-bg-app: var(--pp-bm-mint);

  /* LEAD accent (was poppy coral) → dusty rose decoration + rose text */
  --color-poppy: var(--pp-bm-dusty);
  --color-poppy-text: var(--pp-bm-rose);
  --color-poppy-deep: var(--pp-bm-leaf); /* primary CTA → leaf */
  --color-amber-pill: var(--pp-bm-rose); /* RSVP pending emphasis */

  /* SUPPORT accent — English Pear → mint leaf */
  --color-pear: var(--pp-bm-mint-2);
  --color-pear-text: var(--pp-bm-leaf);
  --color-pear-deep: var(--pp-bm-leaf-deep);

  /* Neutrals + ink */
  --color-nimble: #aab9b3;
  --color-nimble-text: var(--pp-bm-ink-soft);
  --color-ink: var(--pp-bm-ink);
  --color-ink-muted: var(--pp-bm-ink-soft);
  --color-charcoal: var(--pp-bm-ink);
  --color-muted: var(--pp-bm-ink-soft);

  /* Blush / rose family → peach + rose */
  --color-blush: var(--pp-bm-peach);
  --color-blush-soft: var(--pp-bm-rose-soft);
  --color-rose-text: var(--pp-bm-rose);

  /* Sage status pills → leaf */
  --color-sage: var(--pp-bm-leaf);
  --color-sage-soft: var(--pp-bm-mint-soft);
  /* RSVP-declined pill text (never red) — was #6B7280 which fails AA on the
	   mint-soft pill; warm neutral ink-soft clears AA and stays non-red. */
  --color-warmgray-pill: var(--pp-bm-ink-soft);

  /* Ceremonial "gold" accents have no place in botanical mint → soft mint */
  --color-gold-logo: var(--pp-bm-mint-2);

  /* Legacy silver/gold aliases → mint family (belt-and-braces) */
  --color-silver-bright: var(--pp-bm-dusty);
  --color-silver-text: var(--pp-bm-ink-soft);
  --color-silver-deep: var(--pp-bm-ink);
  --color-silver-pearl: var(--pp-bm-mint-2);
  --color-silver-frost: var(--pp-bm-rose-soft);
  --color-gold-bright: var(--pp-bm-dusty);
  --color-gold-text: var(--pp-bm-ink-soft);
  --color-gold-deep: var(--pp-bm-ink);
  --color-gold-light: var(--pp-bm-rose-soft);
  --color-gold-pale: var(--pp-bm-mint-soft);

  /* Gradients — remap the ones the critical path uses */
  --gradient-silk: linear-gradient(125deg, #fffefa 0%, var(--pp-bm-mint-soft) 45%, #fffefa 100%);
  --gradient-ivory: linear-gradient(180deg, #fffefa 0%, #f3f8f4 100%);
  --gradient-petal: linear-gradient(
    135deg,
    #fffefa 0%,
    var(--pp-bm-mint-soft) 40%,
    var(--pp-bm-leaf) 62%,
    var(--pp-bm-mint-soft) 84%,
    #fffefa 100%
  );
  --gradient-pear-leaf: linear-gradient(
    135deg,
    #fffefa 0%,
    var(--pp-bm-mint-soft) 45%,
    var(--pp-bm-mint-2) 70%,
    var(--pp-bm-mint-soft) 100%
  );
  --gradient-blush: linear-gradient(135deg, var(--pp-bm-rose-soft) 0%, var(--pp-bm-peach) 100%);

  /* Shadows — leaf-tinted (was coral) */
  --shadow-paper: 0 12px 32px rgba(47, 98, 88, 0.12), 0 4px 12px rgba(47, 98, 88, 0.08);

  /* Friendly accent aliases (for Agents B & C). leaf / leaf-deep are the
     AA/AAA text-safe greens; dusty-rose / butter / lavender are DECORATION
     ONLY — never body text. Mapped onto the mint palette here. */
  --color-leaf: var(--pp-bm-leaf);
  --color-leaf-deep: var(--pp-bm-leaf-deep);
  --color-dusty-rose: var(--pp-bm-dusty);
  --color-butter: var(--pp-bm-yellow);
  --color-lavender: var(--pp-bm-lavender);

  color: var(--color-ink);
}

/* Canvas vs paper:
   - Invitation / hero surfaces (envelope · gate · launch home · เร็วๆ นี้)
     sit on the MINT canvas (set per-surface below).
   - Form / utility standalone pages (RSVP · /me) read as IVORY paper so
     fields stay calm + high-contrast. */
body.pp-bm {
  background: var(--pp-bm-ivory);
}

/* ============================================================
   2. Floral garland motif (porprem_bm_florals())
   ============================================================ */
.pp-bm-florals {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  margin: 0 auto;
  pointer-events: none;
}
.pp-bm-florals--sprig {
  max-width: 180px;
}

/* Cover / header crown wrapper — centres the garland above a title */
.pp-bm-crown {
  display: flex;
  justify-content: center;
  margin: 0 auto 6px;
}

/* ============================================================
   3. ENVELOPE — mint canvas + leaf CTA + botanical particles.
      (The locked illustration SVG + 1.3s open animation are
       untouched; only the surrounding palette shifts.)
   ============================================================ */
.pp-bm.pp-envelope {
  background: var(--pp-bm-mint);
}
.pp-bm .pp-envelope__silk,
.pp-bm .pp-gate__silk {
  background:
    radial-gradient(ellipse 65% 38% at 50% 0%, rgba(47, 98, 88, 0.1) 0%, transparent 62%),
    radial-gradient(ellipse 80% 42% at 50% 100%, rgba(206, 148, 147, 0.16) 0%, transparent 66%),
    linear-gradient(160deg, #cfe0da 0%, #c3d8d1 46%, #d6e5df 100%);
}
.pp-bm .pp-envelope__silk::before {
  opacity: 0.35;
}

/* Particles → botanical: roses = dusty rose, leaves = mint-green, dust = leaf */
.pp-bm .pp-envelope__rose {
  background: radial-gradient(ellipse 60% 80% at 50% 30%, #f6e8e7 0%, #da9b93 45%, #ce9493 100%);
}
.pp-bm .pp-envelope__leaf {
  background: linear-gradient(135deg, #e7f0ec 0%, #8fbfac 55%, #2f6258 100%);
}
.pp-bm .pp-envelope__sparkle {
  background: #8fbfac;
  box-shadow:
    0 0 6px rgba(47, 98, 88, 0.6),
    0 0 12px rgba(47, 98, 88, 0.32);
}

/* Envelope "Open card" CTA → leaf metal instead of coral/gold */
.pp-bm .pp-envelope__btn {
  background: linear-gradient(
    135deg,
    #3c7568 0%,
    #2f6258 42%,
    #274f47 55%,
    #2f6258 72%,
    #3c7568 100%
  );
  color: #fffefa;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -2px 4px rgba(31, 55, 42, 0.4),
    0 8px 24px rgba(47, 98, 88, 0.28),
    0 2px 6px rgba(31, 55, 42, 0.2);
}
/* Small envelope copy sits directly on the mint silk canvas → leaf-deep, and
   drop the base 0.85 opacity (it dilutes below AA). ink-soft would fail. */
.pp-bm .pp-envelope__hint {
  color: var(--pp-bm-leaf-deep);
}
.pp-bm .pp-envelope__subline,
.pp-bm .pp-envelope__headline--small {
  color: var(--pp-bm-leaf-deep);
  opacity: 1;
}
.pp-bm .pp-envelope__skip {
  color: var(--pp-bm-leaf);
}

/* Recolour the small decorative filigree / swirls / corner-star (inline SVG
   with hardcoded coral) to leaf-green so nothing reads coral under the skin.
   CSS `stop-color` / `fill` override the SVG presentation attributes. */
.pp-bm .pp-envelope__filigree-svg stop,
.pp-bm .pp-gate__swirls stop,
.pp-bm .pp-envelope__swirl stop,
.pp-bm .pp-envelope__corner-star stop,
.pp-bm .pp-gate__corner-star stop {
  stop-color: var(--pp-bm-mint-2);
}
.pp-bm .pp-envelope__filigree-svg circle,
.pp-bm .pp-envelope__filigree-svg path[fill]:not([fill="none"]),
.pp-bm .pp-envelope__swirl circle,
.pp-bm .pp-gate__swirls circle {
  fill: var(--pp-bm-mint-2);
}

/* ============================================================
   4. LOGIN GATE — mint canvas; keep the LINE-brand green button.
   ============================================================ */
.pp-bm.pp-gate {
  background: var(--pp-bm-mint);
}
/* Countdown sits transparent on the mint canvas → all text uses dark
   ink / leaf-deep so it clears AA on mint (rose/ink-soft would not). */
.pp-bm .pp-gate__cd-num {
  color: var(--pp-bm-leaf-deep);
}
.pp-bm .pp-gate__cd-lbl {
  color: var(--pp-bm-ink);
}
.pp-bm .pp-gate__quote,
.pp-bm .pp-gate__cd-title {
  color: var(--pp-bm-ink);
}
.pp-bm .pp-gate__cd-eyebrow {
  color: var(--pp-bm-leaf-deep);
}
/* .pp-gate__line-btn intentionally left LINE green (#06C755 brand) */

/* ============================================================
   5. LAUNCH HOME A — quiet the gold filigree; let mint + florals
      carry. Decorative gold SVGs are aria-hidden, safe to hide.
   ============================================================ */
.pp-bm .pp-home-a__filigree,
.pp-bm .pp-home-a__signoff-finial,
.pp-bm .pp-home-a__corner,
.pp-bm .pp-home-a__signoff-botanical,
.pp-bm .pp-home-a__couple-twig {
  display: none;
}

/* Section dividers → simple botanical hairline + leaf dot */
.pp-bm .pp-home-a__divider {
  position: relative;
  height: 18px;
}
.pp-bm .pp-home-a__divider > svg {
  display: none;
}
.pp-bm .pp-home-a__divider::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 18%;
  right: 18%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--pp-bm-hairline) 20%,
    var(--pp-bm-hairline) 80%,
    transparent
  );
}
.pp-bm .pp-home-a__divider::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--pp-bm-leaf);
  opacity: 0.85;
}

/* Reference look: an ivory invitation sheet sitting on the mint canvas.
   The main + silk layer are mint; the invitation card is ivory paper with an
   arch-topped radius. No side margins are added, so there is zero risk of
   horizontal overflow at 320–430px — the mint frames the sheet top/bottom. */
.pp-bm.pp-app-home,
.pp-bm.pp-home-a {
  background: var(--pp-bm-mint);
}
.pp-bm .pp-home-v2__silk {
  background: var(--pp-bm-mint);
}
.pp-bm .pp-home-a__card {
  background: var(--pp-bm-ivory);
  border-radius: 28px 28px 0 0;
  margin-top: 8px;
  padding-top: 6px;
  box-shadow: 0 -6px 20px rgba(47, 98, 88, 0.08);
}

/* Monogram medallion → leaf ring instead of gold */
.pp-bm .pp-home-a__medallion-ring {
  border-color: var(--pp-bm-mint-2) !important;
  box-shadow: 0 0 0 1px rgba(47, 98, 88, 0.12) inset !important;
}
.pp-bm .pp-home-a__monogram {
  color: var(--pp-bm-leaf) !important;
}
.pp-bm .pp-home-a__date-corner {
  border-color: var(--pp-bm-mint-2) !important;
}

/* Section headings + secondary text sit on the mint canvas → dark leaf / ink
   so they clear AA (rose / muted greys would not on mint). */
.pp-bm .pp-home-a__section-title {
  color: var(--pp-bm-leaf-deep);
}
.pp-bm .pp-home-a__venue-fallback {
  color: var(--pp-bm-ink);
}
.pp-bm .pp-home-a__greeting-body,
.pp-bm .pp-home-a__couple-parents {
  color: var(--pp-bm-ink);
}

/* Names in rose, roles/labels in leaf (matches the reference card) */
.pp-bm .pp-home-a__couple-name {
  color: var(--pp-bm-rose);
}
.pp-bm .pp-home-a__couple-role {
  color: var(--pp-bm-leaf);
}
.pp-bm .pp-home-a__greeting {
  color: var(--pp-bm-leaf-deep);
}
/* Eyebrows sit on the mint canvas → use leaf-deep (6.1:1 on mint). Rose is
   kept for text on ivory/card surfaces only, where it clears AA comfortably. */
.pp-bm .pp-home-a__greeting-eyebrow,
.pp-bm .pp-home-a__cover-eyebrow {
  color: var(--pp-bm-leaf-deep);
}
.pp-bm .pp-home-a__cover-date--hero {
  color: var(--pp-bm-leaf-deep);
}

/* Sticky RSVP pill → leaf filled button */
.pp-bm .pp-home-a__sticky-cta-btn {
  background: var(--pp-bm-leaf);
  color: #fffefa;
  box-shadow: 0 10px 26px rgba(47, 98, 88, 0.28);
}

/* ============================================================
   6. RSVP form + ceremonial confirmation
   ============================================================ */
/* RSVP form body stays ivory paper (see `body.pp-bm` above). */
.pp-bm #rsvp-app {
  background: transparent;
}
.pp-bm .rsvp-status {
  background: var(--pp-bm-ivory);
  border-bottom-color: var(--pp-bm-hairline);
}
.pp-bm .rsvp-status__greeting {
  color: var(--pp-bm-leaf-deep);
}
.pp-bm .rsvp-section__title {
  color: var(--pp-bm-leaf-deep);
}
/* NB: the base RSVP checked-state styles already use --color-pear-* tokens,
   which the scope remaps to leaf/mint — so selected attendance + seat cards
   turn botanical mint automatically without extra selectors here. */
.pp-bm .rsvp-summary,
.pp-bm .rsvp-summary__card {
  background: var(--pp-bm-ivory);
}
/* Recolour the confirmation botanical SVG gold accents → leaf (the sage/pear
   greens already sit inside the mint family, so they are left as-is). */
.pp-bm .rsvp-summary__botanical [fill="#C4A047"] {
  fill: var(--pp-bm-leaf);
}
.pp-bm .rsvp-summary__botanical [stroke="#8F7635"] {
  stroke: var(--pp-bm-leaf-deep);
}
.pp-bm .rsvp-summary__botanical [fill="#E8D199"] {
  fill: var(--pp-bm-mint-2);
}
.pp-bm .rsvp-summary__thanks {
  color: var(--pp-bm-rose);
}
.pp-bm .rsvp-summary__primary {
  background: var(--pp-bm-leaf);
  color: #fffefa;
}

/* ============================================================
   7. BOTTOM NAV (3 tabs) — leaf active state
   ============================================================ */
.pp-bm.pp-app-tab-nav,
.pp-bm .pp-app-tab-nav {
  background: var(--pp-bm-ivory);
  border-top: 1px solid var(--pp-bm-hairline);
}
.pp-bm .pp-app-tab-nav__item {
  color: var(--pp-bm-ink-soft);
}
.pp-bm .pp-app-tab-nav__item.is-active,
.pp-bm .pp-app-tab-nav__item[aria-current="page"] {
  color: var(--pp-bm-leaf);
}

/* ============================================================
   8. Shared component polish for the two-venue Event Details
   ============================================================ */
.pp-bm .pp-block-venue-card__segment-title {
  color: var(--pp-bm-rose);
}
.pp-bm .pp-block-venue-card__segment-time {
  color: var(--pp-bm-leaf-deep);
  background: var(--pp-bm-mint-soft);
}

/* ============================================================
   9. Release "เร็วๆ นี้" status page (Pass / Gallery / Wishes)
   ============================================================ */
.pp-bm.pp-release-status,
.pp-bm .pp-release-status {
  background: var(--pp-bm-mint);
}
.pp-bm .pp-release-status__card {
  background: var(--pp-bm-ivory);
}
.pp-bm .pp-release-status__mark {
  color: var(--pp-bm-rose);
}

/* ============================================================
   10. Guard: never let the light decorative colours become text.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .pp-bm .pp-envelope__rose,
  .pp-bm .pp-envelope__leaf,
  .pp-bm .pp-envelope__sparkle {
    animation: none;
  }
}