/* ===========================================================
   AURA — PASTEL THEME (reversible overlay)
   -----------------------------------------------------------
   This file ONLY overrides colour. It loads AFTER styles.css,
   so every rule here wins by cascade order without touching
   the base file. To REVERT: delete the
     <link rel="stylesheet" href="theme-pastel.css" />
   line in index.html (or just this file). Nothing else changes.

   Concept: soft pastel surfaces (lavender / sage / blush /
   butter) with dark ink text, kept legible by anchoring the
   page with near-black CTAs + buttons. Flavour photo cards
   keep white text but their scrim shifts black -> deep plum
   so it harmonises with the pastels.
   =========================================================== */

:root{
  --cream:#fbf8ff;                 /* cooler near-white base   */
  --paper-2:#f1ecf7;
  --muted:rgba(20,16,32,.62);
  --line:rgba(20,16,32,.08);
  --purple:#8f74d6;                /* dusty lavender accent (legible on light) */
  --purple-2:#c9b8f7;              /* pastel lavender (halos/dots) */
  --green:#a9cf86;                 /* pastel sage  */
  --pink:#f8b9cf;                  /* pastel blush */
  --gold:#ffce8e;                  /* pastel butter/peach */
  --shadow:0 34px 100px -30px rgba(120,92,180,.18);
  --shadow-sm:0 16px 48px -20px rgba(120,92,180,.16);
}

html{background:#fbf8ff}
body{
  background:
    radial-gradient(40rem 32rem at 82% 4%,  rgba(201,184,247,.45), transparent 70%),
    radial-gradient(36rem 30rem at 12% 14%, rgba(255,206,142,.34), transparent 72%),
    radial-gradient(42rem 36rem at 60% 100%,rgba(248,185,207,.40), transparent 72%),
    linear-gradient(180deg,#fdfbff 0%, #f7f2fb 46%, #fdf8fc 100%);
  background-attachment:fixed;
}

/* atmosphere */
.cursor-glow{background:radial-gradient(circle, rgba(201,184,247,.22), rgba(255,206,142,.12) 42%, transparent 66%)}

/* nav */
.site-nav.scrolled{background:rgba(248,244,255,.82)}

/* hero */
.hero-lede{color:#5b5570}
.signup-row:focus-within{border-color:rgba(143,116,214,.5);box-shadow:0 18px 50px -28px rgba(143,116,214,.4)}
[data-form].submitted button{background:var(--green);color:var(--ink)}

/* hero halos (one is hardcoded; the rest ride the tokens above) */
.halo-green{background:radial-gradient(circle,#cfe8a6,transparent 66%)}

/* ===========================================================
   MARQUEE — was solid near-black; now a soft pastel band
   =========================================================== */
.marquee{
  background:linear-gradient(90deg,#ece2ff,#ffe6f1,#fff1da,#e9f4d8);
  color:var(--ink);
}

/* ===========================================================
   FLAVOUR CARDS — keep white copy, shift scrim black -> plum
   =========================================================== */
.world-card.is-photo::after{
  background:linear-gradient(90deg, rgba(28,18,48,.84) 0%, rgba(28,18,48,.5) 38%, rgba(28,18,48,0) 64%)}
.world-card.is-photo.copy-right::after{
  background:linear-gradient(270deg, rgba(28,18,48,.84) 0%, rgba(28,18,48,.5) 38%, rgba(28,18,48,0) 64%)}

/* ===========================================================
   WHY AURA BENTO — pastel fills with dark ink text
   =========================================================== */
.panel{color:var(--ink);border-color:rgba(20,16,32,.05)}
.panel p{color:rgba(20,16,32,.66)}
.panel span{opacity:.5}
.panel:hover{box-shadow:0 24px 60px -22px rgba(120,92,180,.22)}
.panel.purple{background:linear-gradient(150deg,#ede4ff,#d6c4fb)}
.panel.green {background:linear-gradient(150deg,#eaf5dc,#cfe7b1)}
.panel.pink  {background:linear-gradient(150deg,#ffe4ee,#fbc7d9)}
.panel.gold  {background:linear-gradient(150deg,#fff1db,#ffddb0)}
.panel.dark{
  background:
    radial-gradient(circle at 28% 22%,rgba(201,184,247,.5),transparent 60%),
    linear-gradient(140deg,#efe7ff,#ffe7f1);
  color:var(--ink);
}
.panel.dark h2{color:var(--ink)}
.panel.dark .eyebrow{color:var(--muted);border-color:var(--line);background:rgba(255,255,255,.5)}

/* ===========================================================
   WAITLIST CTA — was near-black; now a pastel glow card
   =========================================================== */
.final-inner{
  background:
    radial-gradient(circle at 18% 20%,rgba(201,184,247,.6),transparent 48%),
    radial-gradient(circle at 82% 12%,rgba(248,185,207,.55),transparent 46%),
    radial-gradient(circle at 58% 98%,rgba(255,206,142,.5),transparent 52%),
    #fbf4ff;
  color:var(--ink);
  border-color:rgba(20,16,32,.05);
}
.final-inner .capsule{color:var(--ink-2);border-color:var(--line);background:rgba(255,255,255,.55)}
.final-copy>p{color:rgba(20,16,32,.62)}
.final-signup label{color:var(--muted)}
.final-signup .signup-row{background:rgba(255,255,255,.7);border-color:var(--line)}
.final-signup input{color:var(--ink)}
.final-signup input::placeholder{color:#9a8fb0}
.final-signup button{background:var(--ink);color:var(--cream)}
.final-signup button:hover{background:#000}
.final-signup .form-note{color:rgba(20,16,32,.5)}

/* mobile: flavour scrim plum (matches the desktop tint) */
@media(max-width:720px){
  .world-card.is-photo::after,
  .world-card.is-photo.copy-right::after{
    background:linear-gradient(0deg, rgba(28,18,48,.9) 0%, rgba(28,18,48,.54) 32%, rgba(28,18,48,0) 62%)}
}