/* Linguas 2026 flat palette
   Source reference:
   Pink  #E166C1  rgb(225, 102, 193)
   Navy  #2A3050  rgb(42, 48, 80)
   Cream #FFFFF1  rgb(255, 255, 241)
*/

:root {
  --linguas-pink: #E166C1;
  --linguas-navy: #2A3050;
  --linguas-cream: #FFFFF1;

  --bg: var(--linguas-navy);
  --text: var(--linguas-cream);
  --muted: rgba(255, 255, 241, 0.72);
  --accent: var(--linguas-pink);
  --accent-2: var(--linguas-pink);
  --accent-3: var(--linguas-pink);
}

html,
body {
  background: var(--linguas-navy) !important;
  color: var(--linguas-cream);
}

/* Flat surfaces: no glass gradients or coloured glow. */
.navbar-te,
.panel,
.event-card,
.site-footer,
.hero-secondary-cta,
.btn-social-outline {
  background: var(--linguas-navy) !important;
  color: var(--linguas-cream) !important;
  border-color: rgba(255, 255, 241, 0.18) !important;
  box-shadow: none !important;
}

.btn-cta,
.price-badge,
#event-banner {
  background: var(--linguas-pink) !important;
  color: var(--linguas-navy) !important;
  box-shadow: none !important;
}

.btn-cta:hover,
.btn-cta:focus,
.hero-secondary-cta:hover,
.hero-secondary-cta:focus {
  background: var(--linguas-cream) !important;
  color: var(--linguas-navy) !important;
  border-color: var(--linguas-cream) !important;
}

.nav-link,
.social-icons a,
.subtitle,
.event-meta,
.count-label,
.footer-bottom,
.footer-bottom a {
  color: rgba(255, 255, 241, 0.72) !important;
}

.nav-link:hover,
.social-icons a:hover,
.footer-bottom a:hover,
.event-body h5 a:hover,
.work-path-link,
.title-dot,
.eyebrow {
  color: var(--linguas-pink) !important;
}

.title-dot,
.dot-weekly,
.dot-friday,
.dot-thought,
.dot-special {
  background: var(--linguas-pink) !important;
}

.count-number {
  background: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  color: var(--linguas-pink) !important;
  text-shadow: none !important;
}

/* Do not override .hero-gradient-text here.
   Its pink-to-cream gradient is defined in site.css. */

/* Keep the React Liquid Ether visible behind the page. */
#root {
  opacity: 1 !important;
}

main {
  background: transparent !important;
}

/* Reduce visual effects so the page stays flat. */
.noise::before,
.grid-bg,
.te-stars,
.te-stars::before,
.te-vignette {
  display: none !important;
}

.panel,
.event-card {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Hero video currently obscures the Ether. Hide it for the new direction. */
.hero video {
  display: none !important;
}

.hero,
.hero-overlay {
  background: transparent !important;
}

.hero-overlay {
  display: none !important;
}
