@tailwind base;
@tailwind components;
@tailwind utilities;

body {
  @apply bg-purple-50 text-gray-900 dark:bg-gray-900 dark:text-white font-sans;
}

h1, h2, h3, h4, h5, h6 {
  @apply font-bold text-purple-800 dark:text-purple-300;
}

a {
  @apply text-purple-700 dark:text-purple-400 hover:underline;
}

nav {
  @apply bg-purple-100 dark:bg-purple-800 p-4 flex justify-between items-center shadow-md;
}

nav a {
  @apply mx-3 text-purple-900 dark:text-purple-100 hover:text-purple-700 dark:hover:text-purple-300;
}

section {
  @apply p-8 rounded-lg bg-white dark:bg-gray-800 shadow-md my-6;
}

button {
  @apply bg-purple-600 hover:bg-purple-700 text-white font-medium py-2 px-4 rounded transition duration-300;
}

input, textarea {
  @apply w-full px-4 py-2 border border-purple-300 dark:border-purple-600 rounded bg-white dark:bg-gray-700 text-gray-900 dark:text-white focus:outline-none focus:ring-2 focus:ring-purple-500;
}

.card {
  @apply bg-purple-200 dark:bg-purple-700 text-purple-900 dark:text-purple-100 p-6 rounded-lg shadow-lg;
}

.accordion-item {
  @apply border border-purple-200 dark:border-purple-700 rounded-lg overflow-hidden;
}

.accordion-button {
  @apply w-full text-left px-6 py-4 bg-purple-100 dark:bg-purple-900 text-purple-800 dark:text-purple-200 font-semibold focus:outline-none transition duration-300 ease-in-out;
}

.accordion-button:hover {
  @apply bg-purple-200 dark:bg-purple-800;
}

.accordion-content {
  @apply px-6 py-4 bg-white dark:bg-gray-800 text-gray-700 dark:text-gray-200;
}