/* ==========================================================================
   SITE-WIDE LUXURY DARK THEME — body.lux-dark
   Applied to all pages. Unified dark leather texture, gold grid, ivory type.
   ========================================================================== */

/* ── 1. Scoped custom properties ─────────────────────────────────────────── */

body.lux-dark {
  --lux-bg: #121212;
  --lux-gold: var(--color-accent);
  --lux-gold-hover: var(--color-accent-strong);
  --lux-ivory: #F5F5F0;
  --lux-body-text: rgba(245, 245, 240, 0.88);
  --lux-card-border: var(--color-border);
  --lux-card-shadow:
    inset 1px 1px 2px rgba(255, 255, 255, 0.15),
    inset -1px -1px 3px rgba(0, 0, 0, 0.8),
    0 10px 30px rgba(0, 0, 0, 0.5);

  /* Semantic color tokens (theme-gold compatibility scope) */
  --color-bg: var(--lux-bg);
  --color-surface: #1d2027;
  --color-surface-raised: #222730;
  --color-text: var(--lux-ivory);
  --color-text-muted: var(--lux-body-text);
  --color-heading: var(--lux-ivory);
  --color-accent: var(--electric);
  --color-accent-strong: var(--electric-dark);
  --color-accent-subtle: color-mix(in srgb, var(--color-accent) 35%, transparent);
  --color-accent-glow: color-mix(in srgb, var(--color-accent) 15%, transparent);
  --color-border: color-mix(in srgb, var(--color-accent) 24%, var(--color-surface));
  --color-border-accent: color-mix(in srgb, var(--color-accent) 28%, transparent);
  --color-on-accent: var(--color-bg);
  --color-inverse-bg: var(--color-bg);
  --color-inverse-text: var(--lux-ivory);
}

/* ── 2. Body & background layers ─────────────────────────────────────────── */

body.lux-dark {
  background: var(--lux-bg);
  color: var(--color-text);
}

/* Tactile backdrop: dark gradient overlay */
body.lux-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background: linear-gradient(160deg, rgba(24, 24, 24, 0.55) 0%, rgba(18, 18, 18, 0.45) 56%, rgba(14, 14, 14, 0.6) 100%);
}

/* Atmosphere: vignette + noise grain */
body.lux-dark::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, 0.08) 0%, transparent 34%),
    radial-gradient(ellipse at 50% 8%, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0.52) 76%, rgba(0, 0, 0, 0.66) 100%),
    url('/assets/images/noise.svg') center / 180px 180px repeat;
}

/* iOS: fixed bg doesn't work on mobile Safari */
@media (hover: none) {
  body.lux-dark::before {
    position: absolute;
    height: 100%;
    background-attachment: scroll;
  }
}

/* ── 3. Gold grid overlay ────────────────────────────────────────────────── */
/*
   Strategy: apply the grid as ::after on each .section (not .hero-fullbleed).
   background-attachment: fixed makes the grid appear continuous across sections,
   same visual as the old page-main::before — but the hero is naturally excluded.
   .lux-hero-section (email capture) already has its own inline SVG grid, so skip it.
*/

body.lux-dark .page-main .section:not(.lux-hero-section) {
  position: relative;
}

body.lux-dark .page-main .section:not(.lux-hero-section)::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: url('/assets/images/lux-grid.svg') center / cover no-repeat fixed;
  opacity: 0.10;
}

/* Mobile Safari and dynamic viewport changes can shift fixed section overlays. */
@media (hover: none), (max-width: 64rem) {
  body.lux-dark .page-main .section:not(.lux-hero-section)::after {
    background-attachment: scroll;
  }
}

/* Content inside sections must sit above the grid pseudo */
body.lux-dark .page-main .section > .container,
body.lux-dark .page-main .section > .container--narrow {
  position: relative;
  z-index: 1;
}

/* ── 4. Sections → transparent on unified dark bg ────────────────────────── */

body.lux-dark .page-main .section,
body.lux-dark .page-main .section--paper,
body.lux-dark .page-main .section--parchment,
body.lux-dark .page-main .section--ink {
  background: transparent;
  color: var(--color-text);
}

/* Replace fog dividers with subtle gold rule */
body.lux-dark .page-main .section + .section {
  border-top: none;
}

/* ── 5. Typography ───────────────────────────────────────────────────────── */

body.lux-dark .page-main .page-title,
body.lux-dark .page-main .section-title,
body.lux-dark .page-main h1,
body.lux-dark .page-main h2,
body.lux-dark .page-main h3,
body.lux-dark .page-main h4,
body.lux-dark .page-main h5,
body.lux-dark .page-main h6 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

body.lux-dark .page-main .section-title {
  font-weight: 600;
}

/* Hero headline — scale down for real viewport widths */
body.lux-dark .hero-content .page-title {
  font-size: clamp(2.2rem, 5vw, 4rem);
  line-height: 1.08;
}

/* Page-level titles (non-hero) — tighten up */
body.lux-dark .page-main .page-title {
  font-size: clamp(2.4rem, 5.5vw, 4.5rem);
}

/* Section titles — keep proportional */
body.lux-dark .page-main .section-title {
  font-size: clamp(1.8rem, 3.5vw, 2.75rem);
}

body.lux-dark .page-main p,
body.lux-dark .page-main li,
body.lux-dark .page-main .section-lead,
body.lux-dark .page-main .stack-copy {
  color: var(--color-text-muted);
}

body.lux-dark .page-main .eyebrow {
  color: var(--color-accent);
}

body.lux-dark .page-main .eyebrow::before {
  background: color-mix(in srgb, var(--color-accent) 60%, transparent);
}

body.lux-dark .page-main .copy-emphasis {
  color: var(--color-accent-weak);
}

body.lux-dark .page-main .quote-line {
  color: var(--color-text);
}

/* ── 6. Cards — 3D metallic bronze ───────────────────────────────────────── */

body.lux-dark .page-main .upcoming-card,
body.lux-dark .page-main .highlight-grid .content-card,
body.lux-dark .page-main .innovator-card,
body.lux-dark .page-main .gallery-event-card {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--lux-card-shadow);
  border-radius: 2px;
}

body.lux-dark .page-main .upcoming-card {
  border-left: 2px solid var(--color-accent);
}

body.lux-dark .page-main .gallery-event-card__meta h3,
body.lux-dark .page-main .innovator-card__body h3 {
  color: var(--color-text);
}

body.lux-dark .page-main .gallery-event-card__meta p,
body.lux-dark .page-main .innovator-card__body .innovator-role {
  color: var(--color-text-muted);
}

/* ── 7. Styled list (event benefits) ─────────────────────────────────────── */

body.lux-dark .page-main .list-styled li {
  color: var(--color-text-muted);
}

body.lux-dark .page-main .list-styled li::before {
  color: var(--color-accent);
}

/* ── 8. Primary CTA — solid gold, sharp corners ──────────────────────────── */

.btn-lux-primary {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: 0.75rem var(--s4);
  background-color: color-mix(in srgb, var(--color-accent) 76%, var(--color-bg) 24%);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 26%, var(--color-accent) 74%) 0%,
      color-mix(in srgb, #f2e5bf 28%, var(--color-accent) 72%) 46%,
      color-mix(in srgb, #000 10%, var(--color-accent) 90%) 100%),
    repeating-linear-gradient(135deg,
      color-mix(in srgb, #fff 7%, transparent) 0 2px,
      color-mix(in srgb, #fff 1%, transparent) 2px 6px);
  background-size: 100% 100%, 220% 220%;
  background-position: center, 0% 0%;
  color: var(--color-on-accent);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-accent) 48%, #000 52%);
  border-radius: 0;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent),
    0 8px 16px color-mix(in srgb, var(--color-accent) 18%, transparent);
  transition:
    background-color 160ms ease,
    background-position 220ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}

.btn-lux-primary:hover,
.btn-lux-primary:focus-visible {
  background-color: color-mix(in srgb, var(--color-accent) 70%, var(--color-bg) 30%);
  background-position: center, 100% 100%;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 20%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 10px 20px color-mix(in srgb, var(--color-accent) 22%, transparent);
  transform: translateY(-1px);
}

.btn-lux-primary:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

.btn-lux-primary:active {
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 14%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 5px 12px color-mix(in srgb, var(--color-accent) 16%, transparent);
}

.btn-lux-primary svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* ── 9. Ghost button override ────────────────────────────────────────────── */

body.lux-dark .btn-ghost-light {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 9%, transparent) 0%,
      color-mix(in srgb, #000 12%, transparent) 100%),
    color-mix(in srgb, var(--color-bg) 12%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(118%);
  backdrop-filter: blur(8px) saturate(118%);
  border-radius: 0;
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
  color: var(--color-text);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 12%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent);
  transition:
    border-color 0.2s ease,
    color 0.2s ease,
    background-color 0.2s ease,
    backdrop-filter 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
}

body.lux-dark .btn-ghost-light:hover,
body.lux-dark .btn-ghost-light:focus-visible {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 12%, transparent) 0%,
      color-mix(in srgb, #000 14%, transparent) 100%),
    color-mix(in srgb, var(--color-bg) 17%, transparent);
  -webkit-backdrop-filter: blur(10px) saturate(125%);
  backdrop-filter: blur(10px) saturate(125%);
  border-color: var(--color-accent);
  color: var(--color-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 16%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 22%, transparent),
    0 8px 18px color-mix(in srgb, var(--color-accent) 18%, transparent);
  transform: translateY(-1px);
}

/* ── 10. Photo grid — sharp metallic frames ──────────────────────────────── */

body.lux-dark .page-main .photo-grid-4x2 figure {
  border-radius: 2px;
  border: 1px solid var(--color-border);
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  box-shadow: var(--lux-card-shadow);
}

/* ── 11. Sponsor logo row ────────────────────────────────────────────────── */

body.lux-dark .page-main .sponsor-logo-row li {
  color: var(--color-text-muted);
  border-color: color-mix(in srgb, var(--color-accent) 45%, transparent);
}

/* ── 12. Header — dark glass ─────────────────────────────────────────────── */

body.lux-dark .site-header {
  background: rgba(18, 18, 18, 0.92);
  border-bottom-color: color-mix(in srgb, var(--color-accent) 12%, transparent);
}

body.lux-dark .site-header.scrolled {
  border-bottom-color: color-mix(in srgb, var(--color-accent) 22%, transparent);
}

body.lux-dark .wordmark {
  color: var(--color-text);
}

body.lux-dark .primary-nav a {
  color: rgba(245, 245, 240, 0.6);
}

body.lux-dark .primary-nav a:hover,
body.lux-dark .primary-nav a:focus-visible {
  color: var(--color-text);
}

body.lux-dark .primary-nav a.is-active {
  color: var(--color-text);
  border-bottom-color: var(--color-accent);
}

body.lux-dark .btn-line {
  color: var(--color-text);
}

body.lux-dark .btn-line::before {
  background-color: var(--color-text);
}

body.lux-dark .menu-toggle {
  color: var(--color-text);
  border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);
}

@media (max-width: 64rem) {
  body.lux-dark.mobile-nav-open::before {
    background: color-mix(in srgb, #000 56%, transparent);
  }

  body.lux-dark .primary-nav ul {
    background: rgba(18, 18, 18, 0.96);
    border-color: color-mix(in srgb, var(--color-accent) 20%, transparent);
    box-shadow:
      0 16px 44px rgba(0, 0, 0, 0.5),
      inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  }

  body.lux-dark .primary-nav a {
    color: rgba(245, 245, 240, 0.7);
  }

  body.lux-dark .menu-toggle {
    background: color-mix(in srgb, var(--color-bg) 20%, transparent);
    border-color: color-mix(in srgb, var(--color-accent) 38%, transparent);
  }
}

/* ── 13. Footer ──────────────────────────────────────────────────────────── */

body.lux-dark .site-footer {
  background: rgba(10, 10, 10, 0.9);
  border-top: 1px solid color-mix(in srgb, var(--color-accent) 12%, transparent);
}

/* ── 14. btn-electric → solid gold (site-wide) ──────────────────────────── */

body.lux-dark .btn-electric {
  background-color: color-mix(in srgb, var(--color-accent) 72%, var(--color-bg) 28%);
  background-image:
    linear-gradient(180deg,
      color-mix(in srgb, #fff 24%, var(--color-accent) 76%) 0%,
      color-mix(in srgb, #f0e1b8 24%, var(--color-accent) 76%) 48%,
      color-mix(in srgb, #000 10%, var(--color-accent) 90%) 100%),
    repeating-linear-gradient(135deg,
      color-mix(in srgb, #fff 6%, transparent) 0 2px,
      color-mix(in srgb, #fff 1%, transparent) 2px 6px);
  background-size: 100% 100%, 220% 220%;
  background-position: center, 0% 0%;
  color: var(--color-on-accent);
  border: 1px solid color-mix(in srgb, var(--color-accent) 45%, #000 55%);
  border-radius: 0;
  animation: none;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 15%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 14%, transparent),
    0 9px 18px color-mix(in srgb, var(--color-accent) 20%, transparent);
  transition:
    background-color 0.18s ease,
    background-position 0.22s ease,
    box-shadow 0.2s ease,
    transform 0.18s ease;
}

body.lux-dark .btn-electric:hover,
body.lux-dark .btn-electric:focus-visible {
  background-color: color-mix(in srgb, var(--color-accent) 66%, var(--color-bg) 34%);
  background-position: center, 100% 100%;
  color: var(--color-on-accent);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 18%, transparent),
    inset 0 -1px 0 color-mix(in srgb, #000 18%, transparent),
    0 11px 22px color-mix(in srgb, var(--color-accent) 24%, transparent);
  transform: translateY(-1px);
  animation: none;
}

body.lux-dark .btn-electric:active,
body.lux-dark .btn-ghost-light:active {
  transform: translateY(0);
}

/* ── 15. btn-sweep on dark bg ────────────────────────────────────────────── */

body.lux-dark .btn-sweep {
  color: var(--color-text);
}

body.lux-dark .btn-sweep span {
  color: var(--color-text);
}

body.lux-dark .btn-sweep span::before {
  color: var(--color-accent);
}

body.lux-dark .btn-sweep svg {
  color: var(--color-text);
}

body.lux-dark .btn-sweep::after {
  background: var(--color-accent);
}

body.lux-dark .btn-sweep:hover svg {
  color: var(--color-accent);
}

/* ── 16. Strip organic geometry & waves ──────────────────────────────────── */

body.lux-dark .host-flow-photo {
  border-radius: 2px;
}

body.lux-dark .host-flow-section::before,
body.lux-dark .host-flow-section::after {
  display: none;
}

body.lux-dark .host-wave-to-ink,
body.lux-dark .host-wave-to-paper {
  margin-bottom: 0;
  padding-bottom: var(--s8);
}

body.lux-dark .host-hero-photo {
  border-radius: 2px;
}

body.lux-dark .host-hero-card {
  border-radius: 2px;
}

/* ── 17. Host page elements ──────────────────────────────────────────────── */

body.lux-dark .host-hero-kicker {
  color: var(--color-text);
}

body.lux-dark .host-belief-card {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--lux-card-shadow);
  border-radius: 2px;
}

body.lux-dark .host-belief-card h3 {
  color: var(--color-text);
}

body.lux-dark .host-belief-card p {
  color: var(--color-text-muted);
}

body.lux-dark .host-cta-section {
  background: transparent;
  color: var(--color-text);
}

body.lux-dark .host-cta-section .section-title,
body.lux-dark .host-cta-section p {
  color: var(--color-text);
}

/* ── 18. Forms on dark bg ────────────────────────────────────────────────── */

body.lux-dark .neumorphic-input {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: none;
}

body.lux-dark .neumorphic-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

body.lux-dark .neumorphic-input::placeholder {
  color: rgba(245, 245, 240, 0.4);
}

body.lux-dark label {
  color: var(--color-text-muted);
}

body.lux-dark textarea {
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

body.lux-dark textarea:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 20%, transparent);
}

/* Contact + partner forms: keep inputs dark and readable inside notify panels */
body.lux-dark .contact-form-shell .form-field input,
body.lux-dark .contact-form-shell .form-field select,
body.lux-dark .contact-form-shell .form-field textarea,
body.lux-dark #partner-inquiry-form .form-field input,
body.lux-dark #partner-inquiry-form .form-field select,
body.lux-dark #partner-inquiry-form .form-field textarea {
  background: color-mix(in srgb, var(--color-surface) 90%, var(--color-bg));
  color: var(--color-text);
  border: 1px solid color-mix(in srgb, var(--color-accent) 28%, transparent);
  box-shadow: none;
}

body.lux-dark .contact-form-shell .form-field input::placeholder,
body.lux-dark .contact-form-shell .form-field textarea::placeholder,
body.lux-dark #partner-inquiry-form .form-field input::placeholder,
body.lux-dark #partner-inquiry-form .form-field textarea::placeholder {
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

body.lux-dark .contact-form-shell .form-field select:invalid,
body.lux-dark #partner-inquiry-form .form-field select:invalid {
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

body.lux-dark .contact-form-shell .form-field input:focus,
body.lux-dark .contact-form-shell .form-field select:focus,
body.lux-dark .contact-form-shell .form-field textarea:focus,
body.lux-dark #partner-inquiry-form .form-field input:focus,
body.lux-dark #partner-inquiry-form .form-field select:focus,
body.lux-dark #partner-inquiry-form .form-field textarea:focus {
  background: color-mix(in srgb, var(--color-surface-raised) 86%, var(--color-bg));
  border-color: color-mix(in srgb, var(--color-accent) 72%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 22%, transparent);
}

/* ── 19. Gallery & content overlays ──────────────────────────────────────── */

body.lux-dark .gallery-overlay {
  color: var(--color-text);
}

body.lux-dark .gallery-card {
  border-radius: 2px;
  border: 1px solid var(--color-border);
}

body.lux-dark .content-card {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--lux-card-shadow);
  border-radius: 2px;
}

body.lux-dark .content-card p,
body.lux-dark .content-card li {
  color: var(--color-text-muted);
}

/* ── 20. Misc site-wide dark fixes ───────────────────────────────────────── */

body.lux-dark .subtle-link {
  color: var(--color-accent);
}

body.lux-dark .text-link-gold {
  color: var(--color-accent);
}

/* Logo SVG is pre-styled — no filter needed */

body.lux-dark .btn-shine {
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--color-accent) 52%, var(--color-text)) 0%,
    var(--color-accent) 42%,
    color-mix(in srgb, var(--color-accent-strong) 70%, var(--color-text)) 78%,
    var(--color-text) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Notify panel (contact form card) — sharp edges */
body.lux-dark .notify-panel {
  border-radius: 2px;
}

/* Contact form — single-column layout when no sidebar content */
body.lux-dark .contact-form-shell.notify-panel {
  display: block;
}

/* ── 21. Value cards — dark treatment ────────────────────────────────────── */

body.lux-dark .value-card {
  border-color: var(--color-border);
}

body.lux-dark .value-card__front {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
}

body.lux-dark .value-card__front h3 {
  color: var(--color-text);
}

body.lux-dark .value-card__back {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
}

body.lux-dark .value-card__back-content {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
}

body.lux-dark .value-card__back-text {
  color: var(--color-text-muted);
}

body.lux-dark .value-card__back-content .btn-sweep {
  color: var(--color-accent);
}

/* ── 22. Testimonial cards ───────────────────────────────────────────────── */

body.lux-dark .testimonial-card {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border-color: var(--color-border);
}

body.lux-dark .testimonial-card blockquote {
  color: var(--color-text);
}

body.lux-dark .testimonial-card cite {
  color: var(--color-text-muted);
}

/* ── 23. Sponsor tier cards ──────────────────────────────────────────────── */

body.lux-dark .sponsor-tier-card {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border-color: var(--color-border);
}

body.lux-dark .sponsor-tier-card h3 {
  color: var(--color-text);
}

body.lux-dark .sponsor-tier-card p {
  color: var(--color-text-muted);
}

body.lux-dark .sponsor-tier-list li {
  color: var(--color-text-muted);
}

body.lux-dark .sponsor-tier-card--silver {
  background:
    linear-gradient(160deg, #2a2d33 0%, #1e2028 56%, #191b22 100%);
  border-top: 3px solid #6b7387;
  box-shadow: var(--lux-card-shadow);
}

body.lux-dark .sponsor-tier-card--silver::before {
  background: linear-gradient(118deg,
    rgba(180, 188, 203, 0.12) 0%,
    rgba(180, 188, 203, 0.04) 28%,
    transparent 56%);
}

body.lux-dark .sponsor-tier-card--silver::after {
  background: radial-gradient(circle, rgba(140, 155, 180, 0.15) 0%, transparent 74%);
}

body.lux-dark .sponsor-tier-card--silver h3 {
  color: #c5cedd;
}

body.lux-dark .sponsor-tier-card--silver .sponsor-price {
  color: #b4bccb;
}

body.lux-dark .sponsor-tier-card--silver .sponsor-tier-list li::before {
  color: #8b96a9;
}

body.lux-dark .sponsor-tier-card--gold {
  background:
    linear-gradient(160deg, var(--color-surface-raised) 0%, var(--color-surface) 56%, var(--color-bg) 100%);
  border-top: 3px solid var(--color-accent);
  box-shadow: var(--lux-card-shadow);
}

body.lux-dark .sponsor-tier-card--gold::before {
  background: linear-gradient(118deg,
    color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
    color-mix(in srgb, var(--color-accent) 4%, transparent) 28%,
    transparent 56%);
}

body.lux-dark .sponsor-tier-card--gold::after {
  background: radial-gradient(circle, color-mix(in srgb, var(--color-accent) 12%, transparent) 0%, transparent 74%);
}

body.lux-dark .sponsor-tier-card--gold h3 {
  color: var(--color-accent);
}

body.lux-dark .sponsor-tier-card--gold .sponsor-price {
  color: var(--color-accent-weak);
}

body.lux-dark .sponsor-tier-card--gold .sponsor-tier-list li::before {
  color: var(--color-accent);
}

body.lux-dark .sponsor-tier-card--platinum {
  background:
    linear-gradient(160deg, #2d2e34 0%, #1f2026 56%, #17181d 100%);
  border-top: 3px solid #c5cedd;
  box-shadow: var(--lux-card-shadow);
}

body.lux-dark .sponsor-tier-card--platinum::before {
  background: linear-gradient(118deg,
    rgba(197, 206, 221, 0.12) 0%,
    rgba(197, 206, 221, 0.04) 28%,
    transparent 56%);
}

body.lux-dark .sponsor-tier-card--platinum::after {
  background: radial-gradient(circle, rgba(197, 206, 221, 0.12) 0%, transparent 74%);
}

body.lux-dark .sponsor-tier-card--platinum h3 {
  color: #e0e6f0;
}

body.lux-dark .sponsor-tier-card--platinum .sponsor-price {
  color: #c5cedd;
}

body.lux-dark .sponsor-tier-card--platinum .sponsor-tier-list li::before {
  color: #8b96a9;
}

/* ── 24. Direct contact & secondary CTA panels ──────────────────────────── */

body.lux-dark .direct-contact-panel {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--lux-card-shadow);
}

body.lux-dark .direct-contact-list li {
  color: var(--color-text-muted);
}

body.lux-dark .direct-contact-list a {
  color: var(--color-accent);
}

body.lux-dark .secondary-cta-panel {
  background: linear-gradient(135deg, var(--color-surface-raised) 0%, var(--color-surface) 100%);
  border: 1px solid var(--color-border);
  box-shadow: var(--lux-card-shadow);
}

/* ── 25. Social icon tooltips ────────────────────────────────────────────── */

body.lux-dark .social-icons .tooltip {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}

/* ── 26. Countdown ───────────────────────────────────────────────────────── */

body.lux-dark .countdown-label {
  color: rgba(245, 245, 240, 0.6);
}