/* ============================================
   THEME: Museum of Money
   Deep forest green, electric neon green text,
   off-white cards, hot pink accent, bold geometric
   Inspired by museumofmoney.com
   Font: Plus Jakarta Sans (closest to Aileron)
   ============================================ */

:root[data-theme="museum"] {
  /* Fonts — Plus Jakarta Sans: geometric, clean, confident */
  --font-serif: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-sans:  'Plus Jakarta Sans', system-ui, sans-serif;

  /* Core palette */
  --color-bg:           #00592b;
  --color-bg-alt:       #004d24;
  --color-bg-light:     #006332;
  --color-bg-card:      #f1f0ec;
  --color-text:         #1ce585;
  --color-text-secondary: rgba(28, 229, 133, 0.82);
  --color-text-muted:   rgba(28, 229, 133, 0.52);
  --color-text-subtle:  rgba(28, 229, 133, 0.32);
  --color-accent:       #f580db;
  --color-accent-hover: #e060c5;
  --color-highlight:    #ffec00;
  --color-border:       rgba(28, 229, 133, 0.2);
  --color-border-strong: rgba(28, 229, 133, 0.45);
  --color-divider:      rgba(28, 229, 133, 0.08);

  /* Nav — deep near-black so it pops against the green page */
  --nav-bg: rgba(25, 15, 10, 0.97);
  --nav-height: 4.25rem;

  /* Footer */
  --footer-bg: #190f0a;
  --footer-text: rgba(28, 229, 133, 0.45);
  --footer-text-strong: rgba(28, 229, 133, 0.8);
  --footer-border: rgba(28, 229, 133, 0.1);

  /* Buttons — off-white primary like their site */
  --btn-primary-bg:       #f1f0ec;
  --btn-primary-text:     #190f0a;
  --btn-secondary-border: rgba(28, 229, 133, 0.35);

  /* Layout */
  --site-margin: clamp(1.5rem, 5vw, 5rem);
  --max-width: 1280px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 20px;
  --radius-pill: 100vw;

  --transition-fast: 200ms ease;
  --transition-med:  300ms ease;
  --transition-slow: 400ms ease;

  --logo-filter: invert(1) brightness(2);
  --holly-bg: #190f0a;

  --heading-weight: 700;
  --heading-tracking: -0.02em;
}

/* ---- Nav: dark bg → light text ---- */
:root[data-theme="museum"] .nav-links a {
  color: rgba(28, 229, 133, 0.78);
}
:root[data-theme="museum"] .nav-links a:hover {
  color: #1ce585;
  opacity: 1;
}

:root[data-theme="museum"] nav .btn-secondary {
  color: rgba(28, 229, 133, 0.78);
  border-color: rgba(28, 229, 133, 0.3);
  background: transparent;
}
:root[data-theme="museum"] nav .btn-secondary:hover {
  color: #1ce585;
  border-color: rgba(28, 229, 133, 0.7);
  opacity: 1;
}

:root[data-theme="museum"] nav .btn-primary {
  background: #f1f0ec;
  color: #190f0a;
}
:root[data-theme="museum"] nav .btn-primary:hover {
  background: #1ce585;
  opacity: 1;
}

:root[data-theme="museum"] .theme-switcher-btn {
  color: rgba(28, 229, 133, 0.75);
  background: rgba(28, 229, 133, 0.08);
  border-color: rgba(28, 229, 133, 0.2);
}
:root[data-theme="museum"] .theme-switcher-btn:hover {
  color: #1ce585;
  border-color: rgba(28, 229, 133, 0.45);
}

:root[data-theme="museum"] nav {
  border-bottom-color: rgba(28, 229, 133, 0.1);
}

/* ---- Typography ---- */
:root[data-theme="museum"] h1,
:root[data-theme="museum"] h2,
:root[data-theme="museum"] h3 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #1ce585;
}

:root[data-theme="museum"] h1 {
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.05;
}

:root[data-theme="museum"] h2 {
  font-size: clamp(2rem, 3.5vw, 3.2rem);
  line-height: 1.08;
}

/* Italic em → hot pink accent */
:root[data-theme="museum"] em {
  font-style: italic;
  color: #f580db;
}

/* Section eyebrows */
:root[data-theme="museum"] h4,
:root[data-theme="museum"] .section-eyebrow {
  color: rgba(28, 229, 133, 0.6);
  letter-spacing: 0.12em;
}

/* ---- Cards: flip to off-white with dark text ---- */
:root[data-theme="museum"] .problem-card,
:root[data-theme="museum"] .feature-item,
:root[data-theme="museum"] .acc-card,
:root[data-theme="museum"] .audience-card {
  background: #f1f0ec;
  border-color: transparent;
  color: #190f0a;
}

:root[data-theme="museum"] .problem-card h3,
:root[data-theme="museum"] .feature-item h3,
:root[data-theme="museum"] .acc-card h4,
:root[data-theme="museum"] .audience-card h3 {
  color: #190f0a;
}

:root[data-theme="museum"] .problem-card p,
:root[data-theme="museum"] .feature-item p,
:root[data-theme="museum"] .acc-card p,
:root[data-theme="museum"] .audience-card p {
  color: rgba(25, 15, 10, 0.7);
}

:root[data-theme="museum"] .feature-item:hover,
:root[data-theme="museum"] .problem-card:hover {
  background: #e8e7e3;
}

/* Icon colour on off-white cards */
:root[data-theme="museum"] .feature-item-icon,
:root[data-theme="museum"] .acc-card-icon,
:root[data-theme="museum"] .audience-card-icon {
  color: #00592b;
}

/* ---- Problem numbers ---- */
:root[data-theme="museum"] .problem-num {
  color: #f580db;
}

/* ---- Audience tags ---- */
:root[data-theme="museum"] .audience-tag {
  background: rgba(0, 89, 43, 0.12);
  color: #00592b;
  border-color: rgba(0, 89, 43, 0.2);
}

/* ---- Stat cards (hero) ---- */
:root[data-theme="museum"] .stat-card {
  background: rgba(28, 229, 133, 0.08);
  border-color: rgba(28, 229, 133, 0.2);
}

:root[data-theme="museum"] .stat-value {
  color: #ffec00;
}

:root[data-theme="museum"] .stat-label {
  color: rgba(28, 229, 133, 0.65);
}

/* ---- Buttons (page level) ---- */
:root[data-theme="museum"] .btn-primary {
  background: #f1f0ec;
  color: #190f0a;
  border-radius: var(--radius-pill);
}
:root[data-theme="museum"] .btn-primary:hover {
  background: #1ce585;
  opacity: 1;
}

:root[data-theme="museum"] .btn-secondary {
  color: #1ce585;
  border-color: rgba(28, 229, 133, 0.35);
  border-radius: var(--radius-pill);
}
:root[data-theme="museum"] .btn-secondary:hover {
  border-color: #1ce585;
  color: #1ce585;
  opacity: 1;
}

/* ---- Holly / CTA section ---- */
:root[data-theme="museum"] .holly-section {
  background: #190f0a;
}
:root[data-theme="museum"] .holly-section h2 {
  color: #1ce585;
}

/* ---- Logo marquee on green bg ---- */
:root[data-theme="museum"] .logo-marquee-item img {
  filter: brightness(0) invert(1) opacity(0.6);
}
:root[data-theme="museum"] .logo-marquee-item:hover img {
  filter: brightness(0) invert(1) opacity(1);
}
/* Hemisphere override doesn't apply on this theme — keep it simple */
:root[data-theme="museum"] .logo-marquee-item:hover img.logo-hemisphere {
  filter: brightness(0) invert(1) opacity(1);
}