/* ============================================================
   THEME — "Limewave": tropical sunset, hot pink + lime, bubble
   type with black outlines. Colors sampled directly from the
   Limewave Design System poster. Swap tokens here for a restyle.
   ============================================================ */

:root {
  /* Brand */
  --pink:        #e8368e;
  --pink-deep:   #a82d72;
  --pink-soft:   #fbd9ea;
  --lime:        #c8f860;
  --lime-deep:   #6f9a2c;
  --gold:        #f5d876;

  /* Surfaces */
  --cream:   #faf3e6;
  --cream-2: #f0e6d2;
  --paper:   #fffdf7;
  --ink:     #1c150f;
  --muted:   #8a7f6e;
  --dim:     #ab9f8b;
  --outline: #14100b;

  /* Semantic (kept distinct from brand pink/lime so state colors stay legible) */
  --good: #4c9a2a;
  --bad:  #cf3d3d;
  --warn: #c97a1a;

  --radius:    22px;
  --radius-sm: 14px;

  --font-display: "Titan One", "Fredoka", cursive;
  --font-head: "Anton", "Archivo Black", sans-serif;
  --font-hand: "Caveat", cursive;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --sunset: linear-gradient(165deg,
    #ffb199 0%, #ff7ea6 20%, #f0538f 38%,
    #d94f93 54%, #a84a8f 70%, #6b3e76 86%, #3c2e52 100%);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 560px; margin: 0 auto; padding: 0 20px 64px; }
.wrap.narrow { max-width: 440px; text-align: center; padding-top: 48px; }

.muted { color: var(--muted); margin: 4px 0; }
.small { font-size: 13px; }
.center { text-align: center; }
.mono { font-family: var(--mono); }

/* ---- Hero (sunset band) ---- */
.hero-bg {
  background: var(--sunset);
  padding-top: 1px; /* clip margin collapse */
}
.hero-bg .wrap { padding-top: 40px; }

.hero { text-align: center; margin-bottom: 28px; }
.eyebrow {
  font-family: var(--font-head);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 13px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.35);
  margin: 0 0 10px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(46px, 15vw, 78px);
  line-height: 1;
  margin: 0 0 14px;
  color: var(--pink);
  -webkit-text-stroke: 3px var(--outline);
  paint-order: stroke fill;
  text-shadow: 0 5px 0 rgba(0,0,0,.25);
  letter-spacing: 0.01em;
}
.dress-note {
  font-family: var(--font-hand);
  font-size: 22px;
  color: #fff;
  transform: rotate(-2deg);
  margin: 0 0 28px;
}
.dress-note:empty { display: none; }

/* ---- Countdown ---- */
.countdown {
  background: var(--paper); border: 3px solid var(--outline); border-radius: var(--radius);
  padding: 18px; margin-bottom: 20px; text-align: center;
  box-shadow: 0 4px 0 var(--outline);
}
.countdown-label {
  margin: 0 0 12px; font-size: 12px; color: var(--muted); text-transform: uppercase;
  letter-spacing: 0.08em; font-family: var(--font-head);
}
.countdown-clock { display: flex; justify-content: center; gap: 8px; }
.unit { background: var(--cream-2); border-radius: var(--radius-sm); padding: 10px 6px; min-width: 60px; }
.unit .v { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--pink-deep); }
.unit .u { display: block; font-size: 10px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.06em; }

/* ---- Info card (WHEN / WHERE / ENTRY / PARKING) ---- */
.info-card {
  background: var(--paper); border: 3px solid var(--outline); border-radius: var(--radius);
  padding: 20px 22px; margin-bottom: 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px;
  box-shadow: 0 4px 0 var(--outline);
}
.info-row + .info-row { margin-top: 14px; }
.info-label {
  display: block; font-family: var(--font-head); font-size: 11px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pink); margin-bottom: 3px;
}
.info-value { display: block; font-weight: 700; font-size: 15px; color: var(--ink); }
.byo-line {
  font-family: var(--font-hand); font-size: 19px; color: var(--pink-deep);
  text-align: center; margin: 14px 0 26px;
}
.byo-line:empty { display: none; }

/* ---- Tiers ---- */
.tiers { display: grid; gap: 12px; margin-bottom: 22px; }
.tier {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
  background: var(--paper); border: 3px solid var(--outline); border-radius: var(--radius);
  padding: 16px 18px; text-align: left; color: inherit; font: inherit; cursor: pointer;
  transition: transform .1s, box-shadow .1s; box-shadow: 0 3px 0 var(--outline);
}
.tier:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 var(--outline); }
.tier.selected { background: var(--pink-soft); }
.tier:disabled, .tier.sold-out { opacity: .5; cursor: not-allowed; box-shadow: 0 3px 0 var(--outline); transform: none; }
.tier-name  { grid-column: 1; grid-row: 1; font-family: var(--font-head); font-size: 16px; letter-spacing: .01em; }
.tier-price {
  grid-column: 2; grid-row: 1 / 3; align-self: center;
  font-family: var(--font-head); font-size: 15px; text-align: center;
  background: var(--lime); border: 2px solid var(--outline); border-radius: 999px;
  padding: 6px 14px; white-space: nowrap;
}
.tier-blurb { grid-column: 1; grid-row: 2; color: var(--muted); font-size: 13px; }
.tier-left  { grid-column: 1; grid-row: 3; color: var(--dim); font-size: 11px; }

/* ---- Buy form ---- */
.buy { display: grid; gap: 12px; margin-bottom: 16px; }
.buy label { font-family: var(--font-head); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
select, button {
  font: inherit; border-radius: 999px; border: 3px solid var(--outline); padding: 14px 16px; width: 100%;
}
select { background: var(--paper); color: var(--ink); font-weight: 600; }
button {
  background: var(--pink); color: #fff; font-family: var(--font-head); letter-spacing: .04em;
  font-size: 16px; cursor: pointer; box-shadow: 0 4px 0 var(--outline);
  transition: transform .1s, box-shadow .1s;
}
button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 0 var(--outline); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 2px 0 var(--outline); }
button:disabled { opacity: .6; cursor: default; }
.error { color: var(--bad); margin: 0; font-size: 14px; font-weight: 600; }
.consent { margin-top: 4px; color: var(--muted); text-align: center; }

/* ---- Success page ---- */
.wrap.narrow .eyebrow { color: var(--pink); text-shadow: none; }
.wrap.narrow h1 { font-family: var(--font-head); font-size: clamp(26px, 7vw, 34px); margin: 0 0 8px; }
.spinner {
  width: 32px; height: 32px; margin: 28px auto; border-radius: 50%;
  border: 3px solid var(--cream-2); border-top-color: var(--pink);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ticket-links { display: grid; gap: 10px; margin: 24px 0; }
.ticket-link {
  display: block; background: var(--pink); color: #fff; text-decoration: none;
  padding: 14px; border-radius: 999px; font-family: var(--font-head); letter-spacing: .04em;
  border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline);
}

/* ---- Ticket page (poster "ADMIT ONE" stub) ---- */
.ticket-page {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px;
  background: var(--sunset);
}
.ticket {
  background: var(--paper); border: 3px solid var(--outline); border-radius: 24px;
  padding: 28px; max-width: 380px; width: 100%; text-align: center;
  box-shadow: 0 6px 0 var(--outline);
}
.ticket.voided { opacity: .6; }
.ticket .eyebrow { color: var(--pink); text-shadow: none; }
.ticket h1 { font-family: var(--font-display); color: var(--pink); font-size: clamp(30px, 8vw, 40px);
  -webkit-text-stroke: 2px var(--outline); paint-order: stroke fill; margin: 0 0 6px; }
.ticket .qr { background: #fff; border: 3px solid var(--outline); padding: 14px; border-radius: 16px; margin: 20px 0; }
.ticket .qr svg { display: block; width: 100%; height: auto; }
.chip {
  display: inline-block; background: var(--lime); border: 2px solid var(--outline); color: var(--ink);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; margin: 0 0 12px;
}
.ticket dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; text-align: left; font-size: 14px; margin: 16px 0 8px; }
.ticket dt { color: var(--muted); font-family: var(--font-head); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.ticket dd { margin: 0; font-weight: 600; }
.banner { border-radius: var(--radius-sm); padding: 10px; font-size: 14px; font-weight: 700; margin: 12px 0; }
.banner-bad  { background: rgba(207,61,61,.12); color: var(--bad); }
.banner-warn { background: rgba(201,122,26,.12); color: var(--warn); }

/* ---- Admin (utilitarian — same tokens, no display type) ---- */
.admin-page { padding: 24px; max-width: 1000px; margin: 0 auto; background: var(--cream); }
.admin-page h1 { font-family: var(--font-head); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin: 20px 0; }
.stat { background: var(--paper); border: 2px solid var(--outline); border-radius: var(--radius-sm); padding: 16px; text-align: center; }
.stat .n { display: block; font-size: 24px; font-weight: 700; color: var(--pink-deep); }
.stat .l { display: block; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.tiers-list, ul.tiers { list-style: none; padding: 0; display: flex; gap: 16px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
table { width: 100%; border-collapse: collapse; margin-top: 16px; font-size: 14px; background: var(--paper); }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--cream-2); }
th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
tr.in { color: var(--dim); }
td.center, th.center { text-align: center; }
.seq { color: var(--dim); font-size: 12px; margin-left: 6px; }
.admin-page button { padding: 6px 12px; font-size: 13px; width: auto; box-shadow: none; border-width: 2px; }
.admin-page a { color: var(--pink-deep); font-weight: 600; }

/* Turnstile widget slot — collapses to nothing when no sitekey is configured. */
.turnstile:empty { display: none; }
.turnstile { display: flex; justify-content: center; }