@import 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

/* Dark mode transition */
html,
body {
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

html.theme-transition * {
  transition: none !important;
}

/* Additional dark mode styles */
body.dark-mode {
  background-color: #111827;
  color: #e5e7eb;
}

/* Force dark mode styles */
html.dark {
  color-scheme: dark;
}

/* Mobile touch improvements */
@media (max-width: 640px) {
  input,
  select,
  button {
    font-size: 16px !important; /* Prevent iOS zoom on focus */
  }

  .touch-manipulation {
    touch-action: manipulation; /* Improve touch responsiveness */
  }
}
