/* =====================================================================
   GuestPlanner — brand.css
   The ONE place to change the whole site's look.
   Edit the colours/fonts in :root below and every page updates at once.
   Each section also has its own stylesheet for its own layout
   (storefront.css, builder.css, admin.css, etc.) — this file only holds
   the shared design tokens and the components used across the whole site.
   ===================================================================== */

:root{
  /* ---- Brand palette (light, warm, wedding) ---- */
  --bg:#faf6ef;          /* page background — warm ivory            */
  --bg2:#f2eadd;         /* alternate band background — deeper cream */
  --panel:#ffffff;       /* cards / raised surfaces                 */
  --panel2:#f4ece0;      /* inputs / subtle panels                  */
  --ink:#2c2620;         /* main text — warm charcoal               */
  --soft:#7c7263;        /* secondary / muted text — warm taupe     */
  --line:#e7ddcc;        /* hairline borders                        */

  /* ---- Accent (kept named "gold" so older rules still work) ---- */
  --gold:#956b1c;        /* deep antique gold — links, accents, buttons */
  --gold-soft:#c8a24e;   /* lighter gold — soft fills, hovers, outlines */
  --gold-tint:rgba(149,107,28,.10); /* faint gold wash for pills/banners */
  --on-gold:#ffffff;     /* text colour that sits on a gold background   */

  /* ---- Status ---- */
  --ok:#3f8f57;
  --err:#c0463d;
  --no:#c0463d;

  /* ---- Type ---- */
  --serif:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --script:"Pinyon Script","Snell Roundhand",cursive;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;

  /* ---- Depth ---- */
  --shadow-sm:0 2px 10px -4px rgba(44,38,32,.18);
  --shadow:0 24px 60px -34px rgba(44,38,32,.30);
  --radius:16px;
}

/* ---- Shared resets / base ---- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%;display:block}

/* ---- Buttons (used everywhere) ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  cursor:pointer;border:0;text-decoration:none;
  font-family:var(--sans);font-weight:500;letter-spacing:.06em;text-transform:uppercase;
  font-size:12.5px;line-height:1;padding:16px 32px;border-radius:999px;
  background:var(--gold);color:var(--on-gold);
  transition:transform .25s ease,filter .25s ease,border-color .25s ease,color .25s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.btn:focus-visible{outline:3px solid var(--gold-soft);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold);filter:none}
.btn.sm{padding:10px 18px;font-size:11.5px}

/* ---- Eyebrow label ---- */
.eyebrow{
  font-family:var(--sans);text-transform:uppercase;letter-spacing:.34em;
  font-size:11.5px;font-weight:600;color:var(--gold);margin:0;
}

/* ---- Scroll-reveal helper ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.reveal.in{opacity:1;transform:none}

/* =====================================================================
   Announcement ticker  (set from the admin panel)
   Markup:
     <div class="gp-ticker"><div class="gp-ticker-track">
        <span>Message&nbsp;&nbsp;•&nbsp;&nbsp;</span> ...repeated...
     </div></div>
   ===================================================================== */
.gp-ticker{
  background:var(--gold);color:var(--on-gold);
  overflow:hidden;white-space:nowrap;position:relative;
  font-family:var(--sans);font-size:13px;letter-spacing:.04em;
}
.gp-ticker-track{
  display:inline-block;padding:9px 0;will-change:transform;
  animation:gp-ticker-scroll 28s linear infinite;
}
.gp-ticker:hover .gp-ticker-track{animation-play-state:paused}
.gp-ticker-track span{padding:0 4px}
.gp-ticker a{color:var(--on-gold);text-decoration:underline;text-underline-offset:2px}
@keyframes gp-ticker-scroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media (prefers-reduced-motion: reduce){
  .gp-ticker-track{animation:none;display:block;text-align:center;white-space:normal;padding:9px 16px}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---- Price display (sale + struck-through RRP), reusable ---- */
.gp-price{display:inline-flex;align-items:baseline;gap:14px}
.gp-price .was{font-family:var(--serif);color:var(--soft);text-decoration:line-through;text-decoration-color:var(--gold)}
.gp-price .now{font-family:var(--serif);color:var(--gold);line-height:1}

/* =====================================================================
   Dark mode — opt-in via the .theme-toggle button. Light is the default.
   Every surface that uses these tokens flips automatically.
   ===================================================================== */
:root[data-theme="dark"]{
  --bg:#15120d;          /* warm near-black */
  --bg2:#1d1812;
  --panel:#1f1a13;
  --panel2:#272117;
  --ink:#f3ede2;         /* warm off-white text */
  --soft:#a99c86;
  --line:#352d20;
  --gold:#d9b45f;        /* brighter gold reads on dark */
  --gold-soft:#e6c87f;
  --gold-tint:rgba(217,180,95,.15);
  --on-gold:#1a1407;     /* dark text on the brighter gold */
  --ok:#5fb37a;
  --err:#e8837b;
  --no:#e8837b;
  --shadow-sm:0 2px 10px -4px rgba(0,0,0,.55);
  --shadow:0 24px 60px -30px rgba(0,0,0,.72);
}
/* the logo is dark ink on transparent — flip it so it shows on dark backgrounds */
:root[data-theme="dark"] .navlogo,
:root[data-theme="dark"] .footlogo{ filter:invert(1) brightness(1.7); }

/* the toggle button itself */
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;cursor:pointer;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--gold);font-size:16px;line-height:1;transition:border-color .2s ease,background .2s ease}
.theme-toggle:hover{border-color:var(--gold)}