/* BTK dark theme: dark green circuit background + readability layer.
   Most colors come from the flipped Tailwind tokens; this handles the
   page background and a few class-based surfaces the tokens do not reach. */
html {
  background: #103e30 url('/assets/btk-circuit-bg.svg') no-repeat center center fixed;
  background-size: cover;
}
body { background: transparent; }

.glass-card {
  background: rgba(9, 36, 28, 0.55) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(160, 220, 195, 0.22) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.38) !important;
}
.ai-gradient, .ai-gradient-bg { background: transparent !important; }
.hero-glow { opacity: 0.5 !important; }

/* mobile dropdown needs a solid backdrop over content */
#mobile-menu { background-color: rgba(7, 33, 25, 0.97) !important; }

/* form fields: legible translucent dark fill (beats the token bg via [class]) */
input[class], textarea[class], select[class] {
  background-color: rgba(9, 36, 28, 0.5) !important;
  color: #eaf4ee !important;
}
input::placeholder, textarea::placeholder { color: #9fbcae !important; }

/* any literal white backgrounds -> transparent so the page bg shows */
.bg-white { background-color: transparent !important; }