/* ============================================================
   HTPM Event Hub — LIGHT variant (loads after styles.css)
   White/paper page with the landing-page grid; ALL cards keep
   the dark-theme look (dark glass + bright teal), matching the
   dark-hero-on-white-page style of the HTPM landing page.
   ============================================================ */

:root {
  /* page shell goes light… */
  --bg: #f5f7f6;
  --ink: #0c1a17;
  --muted: #5c736d;
  /* …page-level accents darken for contrast on white… */
  --teal: #0d9488;
  --teal-2: #0e7f75;
  --teal-dim: #0f766e;
  --gold: #a97613;
  --gold-2: #8a5f0d;
  --line: rgba(10, 90, 78, 0.18);
  --line-strong: rgba(10, 90, 78, 0.34);
  /* …while --panel/--panel-solid/--bg-2 stay DARK from styles.css,
     so every card keeps its dark-theme background automatically. */
}

/* ---------- ambient background: light grid like the landing page ---------- */
.bg-fx {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(13, 148, 136, 0.08), transparent 60%),
    radial-gradient(700px 500px at -10% 30%, rgba(13, 148, 136, 0.05), transparent 60%),
    var(--bg);
}
.bg-fx::before {
  background-image:
    linear-gradient(rgba(12, 26, 23, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12, 26, 23, 0.05) 1px, transparent 1px);
  mask-image: none;
}

/* ============================================================
   DARK CARDS: restore the dark-theme palette inside every card.
   Custom properties are re-declared on the containers, so all
   descendants (labels, borders, accents) resolve dark-theme
   values while the page around them stays light.
   ============================================================ */
.fact-strip, .booth, .card, .skool-card, .day-countdown, .speaker-card,
.pass-form, .stat, .vip-visual, .rail-card, .ann-card,
.founder-photo .photo-placeholder {
  /* the dark-theme --panel is translucent (reads gray over white),
     so cards get an opaque dark base here */
  --panel: #0d1716;
  --panel-solid: #0d1716;
  --ink: #f2f7f6;
  --muted: #93aca6;
  --teal: #35e0c6;
  --teal-2: #0ea5a4;
  --teal-dim: #7fd4c6;
  --gold: #f5c76a;
  --gold-2: #c99a3a;
  --line: rgba(94, 234, 212, 0.16);
  --line-strong: rgba(94, 234, 212, 0.32);
  color: var(--ink);
  box-shadow: 0 18px 44px rgba(12, 26, 23, 0.18);
}
.stat { box-shadow: 0 12px 28px rgba(12, 26, 23, 0.14); }

/* translucent teal/gold tints in styles.css assume a dark page —
   layer them over the opaque dark card base instead */
.speaker-card--main, .ann-card--pinned {
  background: linear-gradient(rgba(23, 194, 173, 0.07), rgba(23, 194, 173, 0.07)), #0d1716;
}
.booth:hover {
  background: linear-gradient(rgba(23, 194, 173, 0.08), rgba(23, 194, 173, 0.08)), #0d1716;
}
.booth--vip:hover {
  background: linear-gradient(rgba(240, 185, 79, 0.07), rgba(240, 185, 79, 0.07)), #0d1716;
}

/* dark-card text that styles.css hardcodes for the dark theme
   stays correct (.ann-body, .skool-card copy, etc.) — only the
   PAGE-LEVEL copies of those rules are re-tinted below. */

/* ---------- page-level text (outside cards) ---------- */
.display em {
  background: linear-gradient(100deg, #0d9488 0%, #0e7f75 55%, #0a6b62 100%);
  -webkit-background-clip: text; background-clip: text;
}
.display .gold, .display em.gold {
  background: linear-gradient(100deg, #b8860b 0%, #a97613 55%, #8a5f0d 100%);
  -webkit-background-clip: text; background-clip: text;
}
.founder-copy p, .session-copy p { color: #33463f; }
.founder-copy strong, .session-copy strong { color: var(--ink); }
.session-copy .check-list li, .vip-benefits .check-list li { color: #33463f; }
.session-copy .check-list b, .vip-benefits .check-list b { color: var(--ink); }

/* ---------- sidebar brand: dark tile so the silver logo reads ---------- */
.side-brand {
  background: linear-gradient(160deg, #101d1b 0%, #070d0c 70%);
  border: 1px solid rgba(10, 90, 78, 0.25);
  border-radius: var(--r);
  padding: 18px 16px;
  align-items: center;
  box-shadow: 0 14px 34px rgba(12, 26, 23, 0.18);
}
.side-brand img { width: 168px; }
.side-brand-label { color: #7fd4c6; }
.side-brand .live-dot { background: #35e0c6; box-shadow: 0 0 12px #35e0c6; }

/* ---------- nav (page-level) ---------- */
.nav-item:hover { background: rgba(13, 148, 136, 0.08); }
.nav-item.active { box-shadow: 0 6px 20px rgba(13, 148, 136, 0.28); }
.nav-item--vip { color: var(--gold); }
.nav-item--vip:hover { background: rgba(169, 118, 19, 0.09); color: var(--gold); }
.nav-badge { color: #ffffff; background: linear-gradient(100deg, #0d9488, #0a6b62); }
.nav-item.active .nav-badge { background: rgba(4, 33, 28, 0.85); color: #45f0d2; }

/* ---------- dark feature blocks keep their look; soften shadows ---------- */
.video-frame { box-shadow: 0 30px 70px rgba(12, 26, 23, 0.25), 0 0 0 6px rgba(13, 148, 136, 0.06); }
.video-placeholder .video-caption { color: #93aca6; }
.skool-card { box-shadow: 0 24px 54px rgba(12, 26, 23, 0.22); }

/* ---------- event pass (card already dark; fix inherited text) ---------- */
.pass-card { color: #f2f7f6; }
.pass-card .pass-role, .pass-card .pass-meta span { color: #93aca6; }
.pass-card .pass-meta b { color: #f2f7f6; }
.pass-card .pass-type { color: #35e0c6; border-color: rgba(94, 234, 212, 0.32); }
.pass-card .pass-meta b#passId { color: #35e0c6; }
.pass-card--vip .pass-type { color: #f5c76a; border-color: rgba(240, 185, 79, 0.4); }
.pass-card--vip .pass-meta b#passId { color: #f5c76a; }
.pass-perforation i { background: var(--bg); }

/* ---------- misc page-level contrast fixes ---------- */
.form-msg.err { color: #c0392b; }
.pass-form .form-msg.err { color: #ff8f8f; }
.day-countdown.is-live::after { color: var(--teal); }