/* =========================================================================
   Chloe's First Bee-Day — shared design system
   Extracted from Meg's invitation + mood board: a soft watercolor-wildflower
   garden aesthetic (NOT bold black/yellow bee). Elegant for family-facing
   pages; a playful "round" register is layered in for the baby game pages.
   ========================================================================= */

:root {
  /* Palette — pulled from the invitation */
  --cream:      #FFFCF7;   /* page background */
  --cream-2:    #FBF3E7;   /* panels / cards */
  --ink:        #6E6052;   /* body text, warm brown-gray */
  --ink-deep:   #574A3B;   /* strong text */
  --coral:      #E59B94;   /* the "Chloe's" script */
  --coral-deep: #D67E74;
  --honey:      #D49A41;   /* "First Bee-Day", section titles */
  --honey-deep: #BC8228;
  --yellow:     #F3CE6B;   /* buttercup flowers, sun */
  --sage:       #A7BD96;   /* stems, foliage */
  --sage-deep:  #8AA178;
  --petal:      #F7DCD7;   /* soft blush wash */
  --bee-black:  #3A352F;   /* tiny bee stripes, soft black */
  --line:       #EADFCB;   /* hairline rules */

  /* Type */
  --script: 'Parisienne', cursive;
  --serif:  'Cormorant Garamond', Georgia, serif;
  --sans:   'Jost', system-ui, sans-serif;     /* tracked labels */
  --body:   'Mulish', system-ui, sans-serif;   /* paragraphs */
  --round:  'Fredoka', system-ui, sans-serif;  /* baby game pages */

  --maxw: 1040px;
  --shadow-soft: 0 3px 8px rgba(87,74,59,.07), 0 1px 24px rgba(87,74,59,.06), 0 0 16px rgba(87,74,59,.05);
  --shadow-hover: 0 7px 8px rgba(87,74,59,.12), 0 5px 16px rgba(87,74,59,.10);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Tracked all-caps label, like "JOIN US TO CELEBRATE" */
.label {
  font-family: var(--sans);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .42em;
  font-size: .8rem;
  color: var(--honey);
  margin: 0;
}

/* The big coral script name */
.script-name {
  font-family: var(--script);
  font-weight: 400;
  color: var(--coral);
  line-height: .9;
  font-size: clamp(4.2rem, 16vw, 9rem);
  margin: .08em 0 .04em;
}

/* Elegant gold serif sub-title, e.g. "FIRST BEE-DAY" */
.serif-title {
  font-family: var(--serif);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--honey);
  font-size: clamp(1.3rem, 4.6vw, 2.3rem);
  margin: 0;
}

.section-title {
  font-family: var(--serif);
  font-weight: 500;
  color: var(--honey-deep);
  letter-spacing: .04em;
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  text-align: center;
  margin: 0 0 .2em;
}

/* ---- Layout ---------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.hero {
  min-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 96px 24px 64px;
  position: relative;
}

.event {
  font-family: var(--serif);
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: var(--ink-deep);
  letter-spacing: .03em;
  margin-top: 6px;
}
.event .dot { color: var(--sage-deep); padding: 0 .5em; }
.event .rsvp { font-style: italic; color: var(--ink); opacity: .85; font-size: .9em; }

/* birthday banner (her actual birthday) + countdown header (to the party) */
.bday-banner {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .14em;
  font-size: .72rem; color: var(--honey-deep);
  background: var(--petal); border: 1px solid #F0C9C2;
  border-radius: 30px; padding: 8px 20px; margin-bottom: 22px;
}
.bday-banner b { color: var(--coral-deep); letter-spacing: .18em; }
.cd-head { margin: 4px 0 12px; }

/* The date plaque, echoing the invitation's "SATURDAY | 27 | 11:30 AM" rule */
.plaque {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  margin: 26px 0 14px;
  padding: 14px 26px;
}
.plaque .side { font-family: var(--sans); text-transform: uppercase; letter-spacing: .2em; font-size: .82rem; color: var(--ink-deep); }
.plaque .day  { font-family: var(--serif); font-weight: 600; font-size: 2.6rem; color: var(--honey-deep); line-height: 1; }
.plaque .mon  { font-family: var(--sans); text-transform: uppercase; letter-spacing: .26em; font-size: .7rem; color: var(--honey); display:block; margin-bottom: 2px; }
.plaque .v { width: 1px; height: 38px; background: var(--line); }

/* ---- Countdown ------------------------------------------------------- */
.countdown { display: flex; gap: 16px; justify-content: center; margin: 8px 0 4px; }
.cd-cell {
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 6px 8px;
  min-width: 74px;
  box-shadow: var(--shadow-soft);
}
.cd-num { font-family: var(--serif); font-weight: 600; font-size: 2rem; color: var(--honey-deep); line-height: 1; }
.cd-lab { font-family: var(--sans); text-transform: uppercase; letter-spacing: .18em; font-size: .6rem; color: var(--ink); margin-top: 6px; }
.countdown.party .cd-cell { background: var(--petal); }

/* ---- Section cards --------------------------------------------------- */
.cards-section { padding: 36px 0 80px; }
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
}
.card {
  position: relative;
  display: block;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px 24px 26px;
  text-align: center;
  color: var(--ink-deep);
  box-shadow: var(--shadow-soft);
  transition: transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.card .ico { height: 56px; margin-bottom: 12px; }
.card h3 { font-family: var(--serif); font-weight: 600; font-size: 1.35rem; margin: 0 0 4px; color: var(--honey-deep); }
.card p  { font-family: var(--body); font-size: .9rem; margin: 0; opacity: .85; }
.card[data-soon]::after {
  content: "coming soon";
  position: absolute; top: 12px; right: 12px;
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em;
  font-size: .56rem; color: var(--sage-deep);
  background: var(--cream-2); border: 1px solid var(--line);
  border-radius: 20px; padding: 3px 9px;
}
.card[data-soon] { pointer-events: none; opacity: .72; }

/* ---- Floral frame & bee --------------------------------------------- */
.floral-top, .floral-bottom {
  position: absolute; left: 0; width: 100%; pointer-events: none; z-index: 0;
}
.floral-top { top: 0; }
.floral-bottom { bottom: 0; transform: scaleY(-1); }
.hero > * { position: relative; z-index: 1; }

.bee { position: relative; z-index: 2; }
.bee-float { animation: beeFloat 6s ease-in-out infinite; transform-origin: center; }
@keyframes beeFloat {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%     { transform: translateY(-14px) rotate(4deg); }
}
.wing { animation: wing .14s ease-in-out infinite alternate; transform-origin: 60% 60%; }
@keyframes wing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* drifting petals */
.petal {
  position: fixed; top: -40px; z-index: 0; pointer-events: none;
  opacity: .8; animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(108vh) rotate(360deg); opacity: 0; }
}

footer {
  text-align: center; padding: 30px 16px 44px;
  font-family: var(--sans); letter-spacing: .12em; text-transform: uppercase;
  font-size: .68rem; color: var(--sage-deep);
}

@media (max-width: 560px) {
  .countdown { gap: 10px; }
  .cd-cell { min-width: 60px; }
  .plaque { gap: 14px; padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .bee-float, .wing, .petal { animation: none !important; }
}

/* =========================================================================
   Starry-night theme — an opt-in twilight garden. /theme.js resolves the
   Day/Night/Auto preference and sets html[data-theme="night"]; every styled
   page shifts together because the palette is all CSS variables. White
   surfaces (cards, buttons, the back-home pill, flip-card fronts, forms) are
   hardcoded #fff, so they get explicit night fills below.
   ========================================================================= */
html[data-theme="night"] {
  --cream:      #1b1d34;   /* twilight sky base (shows through transparent body) */
  --cream-2:    #272a4e;   /* lifted panels */
  --ink:        #DAD4E8;   /* soft moonlit body text */
  --ink-deep:   #F3EFFA;   /* near-white headings */
  --coral:      #F0ABA4;   /* "Chloe's" script, a touch brighter so it glows */
  --coral-deep: #F4BBB3;
  --honey:      #EFC069;   /* titles, warm lantern gold */
  --honey-deep: #F4D27A;
  --yellow:     #F3CE6B;
  --sage:       #AFC59E;
  --sage-deep:  #BCCFAC;   /* lightened for contrast on dark */
  --petal:      #34294a;   /* plum wash for banners / plaques */
  --bee-black:  #3A352F;
  --line:       #3b3e66;   /* indigo hairline */
  --shadow-soft:  0 6px 22px rgba(0,0,0,.40), 0 0 26px rgba(243,206,107,.05);
  --shadow-hover: 0 10px 26px rgba(0,0,0,.48), 0 0 30px rgba(243,206,107,.10);

  /* twilight sky on the root + a soft moon glow up high */
  background:
    radial-gradient(150px 150px at 84% 12%, rgba(255,250,232,.20), rgba(255,250,232,.05) 46%, transparent 72%),
    radial-gradient(1200px 760px at 50% -10%, #2b2553 0%, #1f2042 40%, #171830 100%);
}
html[data-theme="night"] body { background: transparent; }

/* a quiet field of stars behind the content (z-index:-1 = below text, above sky) */
html[data-theme="night"] body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.2px 1.2px at 28% 64%, rgba(255,255,255,.7), transparent),
    radial-gradient(1.6px 1.6px at 42% 12%, rgba(255,250,232,.9), transparent),
    radial-gradient(1px 1px   at 56% 48%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.5px 1.5px at 68% 28%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.1px 1.1px at 78% 70%, rgba(255,250,232,.7), transparent),
    radial-gradient(1.3px 1.3px at 90% 40%, rgba(255,255,255,.8), transparent),
    radial-gradient(1px 1px   at 8%  80%, rgba(255,255,255,.55), transparent),
    radial-gradient(1.2px 1.2px at 36% 88%, rgba(255,255,255,.6), transparent),
    radial-gradient(1.4px 1.4px at 64% 84%, rgba(255,250,232,.7), transparent),
    radial-gradient(1px 1px   at 20% 44%, rgba(255,255,255,.5), transparent),
    radial-gradient(1.3px 1.3px at 50% 74%, rgba(255,255,255,.65), transparent);
  animation: twinkle 5.5s ease-in-out infinite;
}
@keyframes twinkle { 0%,100% { opacity: .9; } 50% { opacity: .55; } }

/* surfaces that hardcode #fff need an explicit night fill */
html[data-theme="night"] .card,
html[data-theme="night"] .front,
html[data-theme="night"] .gb-form,
html[data-theme="night"] .lform { background: #232653; }
html[data-theme="night"] .bh,
html[data-theme="night"] .song-btn { background: #232653; color: var(--honey-deep); }
html[data-theme="night"] .song-btn:hover { background: #2c2f63; }
html[data-theme="night"] .song-btn.playing { background: var(--petal); color: var(--coral-deep); }
html[data-theme="night"] .card[data-soon]::after { background: #2c2f63; }

/* ---- theme toggle (shared, injected by /theme.js) -------------------- */
.theme-toggle {
  position: fixed; top: 15px; right: 15px; z-index: 50;
  width: 42px; height: 42px; padding: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.72); border: 1px solid var(--line);
  color: var(--honey-deep); cursor: pointer;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  box-shadow: var(--shadow-soft);
  transition: transform .18s ease, background .25s ease, color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.theme-toggle:hover { transform: translateY(-2px) rotate(-10deg); }
.theme-toggle:active { transform: translateY(0) scale(.94); }
.theme-toggle svg { width: 21px; height: 21px; display: block; }
html[data-theme="night"] .theme-toggle { background: rgba(38,42,77,.62); color: var(--honey-deep); }

@media (prefers-reduced-motion: reduce) {
  html[data-theme="night"] body::before { animation: none !important; }
}