src/index.css

/* Imports Tailwind CSS base styles, components, and utilities */
@import "tailwindcss";

/* Defines a ripple animation */
@keyframes ripple {
  from {
    transform: scale(1);
    opacity: 0.7;
  }
  to {
    transform: scale(2);
    opacity: 0;
  }
}

/* --- Dark Mode Styles --- */
/* Styles applied when the 'dark' class is present on the html element */
.dark body {
  /* Sets a dark background color for the body */
  background-color: #1a202c; /* A common dark shade, like Tailwind's gray-900 */
  /* Sets a light text color for readability on a dark background */
  color: #cbd5e0; /* A light gray, like Tailwind's slate-300 */
}

/* You can add more specific dark mode styles here */
/* For example, if you have links or buttons: */
/*
.dark a {
  color: #63b3ed; // A light blue for links in dark mode
}

.dark button {
  background-color: #4a5568; // Darker button background
  color: #e2e8f0; // Light button text
}
*/

/* Alternatively, for a system-preference based dark mode without a class toggle,
  you could use the prefers-color-scheme media query.
  However, using the .dark class is more common with Tailwind for explicit control.
*/
/*
@media (prefers-color-scheme: dark) {
  body {
    background-color: #1a202c;
    color: #cbd5e0;
  }
}
*/