/*
 * Dark mode for the website. It follows the device / browser setting
 * (prefers-color-scheme) - there is no manual switch to get out of sync.
 * The templates are written with light-mode Tailwind classes; this sheet
 * re-maps those classes in dark mode. It is loaded after Tailwind's CDN
 * styles are generated, so every rule is !important.
 * The Flutter app uses the matching palette in mobile/lib/config/app_colors.dart.
 */
@media (prefers-color-scheme: dark) {
  html { color-scheme: dark; }
  body.bg-church-cream, .bg-church-cream { background-color: #0B0C1A !important; }
  .bg-white { background-color: #14162B !important; }
  .bg-white\/80 { background-color: rgba(20,22,43,.8) !important; }
  .bg-white\/40 { background-color: rgba(20,22,43,.4) !important; }
  .focus\:bg-white:focus { background-color: #14162B !important; }
  .bg-white[class*='shadow'] { border: 1px solid #22254A; }
  .bg-church-soft, .hover\:bg-church-soft:hover, .focus\:bg-church-soft:focus { background-color: #1E2140 !important; }
  .bg-church-soft\/60, .bg-church-soft\/40 { background-color: rgba(30,33,64,.6) !important; }
  header.bg-church-navy\/95 { background-color: rgba(16,18,58,.95) !important; }
  .text-slate-900 { color: #EDEEFB !important; }
  .text-slate-800 { color: #E2E4F7 !important; }
  .text-slate-700 { color: #CDD0EA !important; }
  .text-slate-600 { color: #B4B8DA !important; }
  .text-slate-500 { color: #9CA0C4 !important; }
  .text-slate-400 { color: #8286AE !important; }
  .text-slate-300 { color: #6A6F9C !important; }
  .text-church-navy, .hover\:text-church-navy:hover, .group:hover .group-hover\:text-church-navy { color: #AEB2FF !important; }
  .bg-church-gold.text-church-navy, .bg-church-gold .text-church-navy, .hover\:bg-church-goldlight:hover.text-church-navy { color: #000098 !important; }
  .bg-church-gold:not(.text-church-navy):not(.text-white) { color: #000098; }
  .border-slate-50, .border-slate-100, .border-slate-200, .ring-slate-200 { border-color: #2A2D52 !important; }
  .border-slate-300 { border-color: #3A3E6A !important; }
  .divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: #2A2D52 !important; }
  .hover\:border-church-navy:hover, .focus\:border-church-navy:focus, .border-church-navy { border-color: #AEB2FF !important; }
  .bg-slate-50 { background-color: #1A1D38 !important; }
  .bg-slate-100, .hover\:bg-slate-100:hover { background-color: #1E2140 !important; }
  .bg-slate-200, .hover\:bg-slate-200:hover { background-color: #2A2D52 !important; }
  .text-red-700, .hover\:text-red-600:hover { color: #FF9C94 !important; }
  .bg-red-50, .hover\:bg-red-50:hover { background-color: #3B1513 !important; }
  .hover\:bg-red-100:hover { background-color: #4A1B18 !important; }
  .border-red-200 { border-color: #7A2A25 !important; }
  .text-emerald-600, .text-emerald-700, .text-emerald-800, .text-green-800 { color: #6EE7B7 !important; }
  .bg-emerald-50, .bg-green-50 { background-color: #0F2E24 !important; }
  .bg-emerald-100 { background-color: #14412F !important; }
  .border-emerald-200 { border-color: #1F5A44 !important; }
  .bg-amber-100 { background-color: #3A2F0E !important; }
  .text-amber-700 { color: #F3D27A !important; }
  .maplibregl-popup-content { background: #14162B; color: #EDEEFB; }
  .maplibregl-popup-anchor-bottom .maplibregl-popup-tip { border-top-color: #14162B; }
  .maplibregl-popup-anchor-top .maplibregl-popup-tip { border-bottom-color: #14162B; }
  .maplibregl-ctrl-group { background: #14162B; }
  .maplibregl-ctrl-group button + button { border-top-color: #2A2D52; }
  .maplibregl-ctrl button .maplibregl-ctrl-icon { filter: invert(1); }
  ::placeholder { color: #8286AE; }
}