/* Minimal global polish on top of Tailwind (CDN).
   Keep this small and intentional; prefer Tailwind utility classes in templates. */

html {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

/* Improve readability for plain text content without affecting form controls. */
main p {
  margin: 0.75rem 0;
  line-height: 1.6;
}

main ul,
main ol {
  margin: 0.75rem 0;
  padding-left: 1.25rem;
}

main ul {
  list-style: disc;
}

main ol {
  list-style: decimal;
}

/* Sensible default links (utility classes still win). */
main a {
  color: #f56a6a;
}

main a:hover {
  text-decoration: underline;
}

/* Dark mode helpers for common Tailwind utility classes used across templates.
   This avoids having to sprinkle dark: variants everywhere. */
html.dark .bg-white {
  background-color: rgb(15 23 42); /* slate-900 */
}

html.dark .bg-slate-50 {
  background-color: rgb(2 6 23); /* slate-950 */
}

html.dark .text-slate-900 {
  color: rgb(241 245 249); /* slate-100 */
}

html.dark .text-slate-800,
html.dark .text-slate-700,
html.dark .text-slate-600 {
  color: rgb(203 213 225); /* slate-300 */
}

html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: rgb(30 41 59); /* slate-800 */
}

html.dark .divide-slate-200 > :not([hidden]) ~ :not([hidden]) {
  border-color: rgb(30 41 59);
}

html.dark .hover\:bg-slate-50:hover {
  background-color: rgb(15 23 42);
}