:root {
  color-scheme: light dark;
}

/* base */
html.dark body {
  background: #0b1220;
  color: #e5e7eb;
}

/* cards / surfaces / rings */
html.dark .bg-white {
  background-color: #0f172a !important;
}
html.dark .ring-slate-200 {
  box-shadow: 0 0 0 1px #1e293b inset;
  border-color: #1e293b !important;
}
html.dark .hover\:bg-slate-50:hover {
  background-color: #0c162a !important;
}

/* slate palette (texts + subtle surfaces) */
html.dark .text-slate-600 {
  color: #94a3b8 !important;
}
html.dark .text-slate-500 {
  color: #9aa4b2 !important;
}
html.dark .bg-slate-100 {
  background-color: #0f1b31 !important;
}
html.dark .bg-slate-200 {
  background-color: #1e293b !important;
  color: #e5e7eb !important;
}

/* pills/chips you use for types/labels */
html.dark .bg-emerald-100 {
  background-color: #064e3b !important;
  color: #a7f3d0 !important;
}
html.dark .bg-indigo-100 {
  background-color: #1e1b4b !important;
  color: #a5b4fc !important;
}

/* accents you use */
html.dark .text-indigo-700 {
  color: #a5b4fc !important;
}
html.dark .bg-indigo-500 {
  background-color: #6366f1 !important;
}

/* form fields */
html.dark input,
html.dark select {
  background: #0f172a;
  color: #e5e7eb;
  border-color: #1e293b;
}

/* Optimization: Pixel-perfect Pokémon icons */
.pixelated {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Optimization: Content Visibility 
   Tells the browser to only calculate layout for items near the viewport.
   Use a height that matches your <li> (approx 72px).
*/
ul li {
  content-visibility: auto;
  contain-intrinsic-size: 72px;
}

/* Ensure the sticky header stays visible in dark mode */
html.dark .sticky {
  background-color: #0b1220 !important;
  border-color: #1e293b !important;
}