/* ═══════════════════════════════════════════════════════
   THEME DROPS — temporary site-wide reskins
   Applied via body.theme-<name> when admin schedules a drop.
   Each theme overrides design tokens so the rest of the CSS
   "just works" without per-component overrides.
   ═══════════════════════════════════════════════════════ */

/* ── Alpine Club ── former default identity, now schedulable as a drop.
   Warm cream paper, Fraunces editorial typography, refined gold accent,
   mountain-climbing video hero. */
body.theme-alpine-club {
  --vertex-blue: #1B2845;
  --vertex-blue-light: #243557;
  --vertex-gold: #B8965A;
  --vertex-gold-light: #C9A961;
  --vertex-gray: #6B6B6B;

  --font-display: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;

  --bg-primary: #F8F4ED;
  --bg-paper: #FAF7F0;
  --bg-surface: #FFFFFF;
  --bg-elevated: #FFFFFF;
  --bg-hover: #F1EBE0;
  --bg-input: #FFFFFF;
  --bg-ink: #1B1B1B;

  --border-subtle: #E8E1D2;
  --border-default: #DDD3BD;
  --border-strong: #BFB196;
  --border-ink: #1B1B1B;

  --text-primary: #1B1B1B;
  --text-secondary: #5C5751;
  --text-tertiary: #9B948A;
  --text-inverse: #F8F4ED;

  --accent-gold: #B8965A;
  --accent-gold-deep: #8C6F3F;
  --accent-gold-soft: rgba(184, 150, 90, 0.12);
  --accent-approve: #2E7D5B;
  --accent-approve-soft: rgba(46, 125, 91, 0.12);
  --accent-delete: #B33A3A;
  --accent-delete-soft: rgba(179, 58, 58, 0.10);

  --gradient-hero: linear-gradient(180deg, #14181f 0%, #1B2845 100%);
  --gradient-gold: linear-gradient(135deg, #B8965A 0%, #C9A961 100%);
  --gradient-subtle: linear-gradient(135deg, #F8F4ED 0%, #F1EBE0 100%);
  --gradient-paper: radial-gradient(1200px 600px at 50% -200px, rgba(184,150,90,0.08), transparent 60%);
}
/* When the Alpine theme is active, hide the lab particle canvas and reveal
   the mountain video instead. */
body.theme-alpine-club .hero__particles     { display: none; }
body.theme-alpine-club .hero__video--alpine { display: block; }
/* Alpine Club uses Fraunces italic for the header title + hero title. */
body.theme-alpine-club .header__title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 32, 'SOFT' 50;
}
body.theme-alpine-club .hero__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  letter-spacing: -0.025em;
}
body.theme-alpine-club .hero__title-grad {
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}
body.theme-alpine-club .timeline-item__day {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 300;
  font-variation-settings: 'opsz' 144, 'SOFT' 0;
}
body.theme-alpine-club .timeline-item__title {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
}
body.theme-alpine-club .member-card__title {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  font-variation-settings: 'opsz' 144, 'SOFT' 100;
}

/* ── Neon (cyberpunk magenta/cyan) ─────────────── */
body.theme-neon {
  --vertex-blue: #1f0a3d;
  --vertex-blue-light: #2d1556;
  --vertex-gold: #ff3df0;
  --vertex-gold-light: #ff5cf3;
  --bg-primary: #0a0420;
  --bg-surface: #14092c;
  --bg-hover: #1d0d3d;
  --bg-input: #1a0b34;
  --border-subtle: #2a164a;
  --border-default: #3a1f5e;
  --border-strong: #4a2972;
  --text-primary: #f3eaff;
  --text-secondary: #b6a5d4;
  --text-tertiary: #8473a5;
  --accent-approve: #00f5d4;
  --gradient-hero: linear-gradient(135deg, #1f0a3d 0%, #5a1fa3 50%, #ff3df0 100%);
  --gradient-gold: linear-gradient(135deg, #ff3df0 0%, #00e5ff 100%);
  color: var(--text-primary);
}
body.theme-neon .header { box-shadow: 0 0 30px rgba(255, 61, 240, 0.25); }
body.theme-neon .hero { background: linear-gradient(160deg, #0a0420 0%, #1f0a3d 50%, #5a1fa3 100%); }
body.theme-neon .hero__progress-fill { box-shadow: 0 0 24px rgba(255, 61, 240, 0.65); }

/* ── Sunset (peach/coral warm) ─────────────────── */
body.theme-sunset {
  --vertex-blue: #4a1d40;
  --vertex-blue-light: #5e2853;
  --vertex-gold: #ff7a45;
  --vertex-gold-light: #ff9966;
  --bg-primary: #fff6f0;
  --bg-surface: #ffffff;
  --bg-hover: #fff0e3;
  --bg-input: #ffffff;
  --border-subtle: #ffe1cf;
  --border-default: #ffcfa8;
  --border-strong: #ffb37d;
  --text-primary: #3d1b32;
  --text-secondary: #7a4a5e;
  --text-tertiary: #b08594;
  --gradient-hero: linear-gradient(135deg, #4a1d40 0%, #c54a4a 50%, #ff7a45 100%);
  --gradient-gold: linear-gradient(135deg, #ff7a45 0%, #ffc371 100%);
}
body.theme-sunset .hero { background: linear-gradient(160deg, #4a1d40 0%, #c54a4a 45%, #ff7a45 100%); }

/* ── Drop banner (always sticky just under header when present) ── */
.drop-banner {
  position: sticky;
  top: 72px; /* sit just below the header */
  z-index: var(--z-sticky);
  padding: var(--space-2) var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.08em;
  background: linear-gradient(90deg, var(--vertex-gold), var(--vertex-gold-light));
  color: #1a1a1a;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  animation: dropBannerSlide 400ms var(--ease-out) both;
}
body.theme-neon .drop-banner { color: #fff; }
@keyframes dropBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .drop-banner { animation: none; }
}