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

@layer components {
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 rounded font-medium transition-colors duration-200
           focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900;
  }

  .btn-lg {
    @apply px-5 py-2 rounded-lg font-normal text-2xl;
  }

  .btn-primary {
    @apply bg-sky-700 text-white hover:bg-sky-900 focus:ring-sky-600
           dark:bg-sky-700 dark:hover:bg-sky-900 dark:focus:ring-sky-700;
  }

  .btn-secondary {
    @apply bg-zinc-500 text-white hover:bg-zinc-700 focus:ring-zinc-700
           dark:bg-zinc-600 dark:hover:bg-zinc-800 dark:focus:ring-zinc-800;
  }

  .btn-nav {
    @apply rounded-md px-3 py-2 text-sm font-medium text-gray-500 hover:bg-gray-500 dark:text-gray-200 dark:hover:bg-gray-950 hover:text-white;
  }

  .btn-nav[aria-current="page"] {
    @apply bg-gray-500 text-white dark:text-gray-200 dark:bg-gray-950; /* Active state styles */
  }

  .h1 {
    @apply text-4xl font-semibold tracking-tight mb-3;
  }

  .h2 {
    @apply text-3xl font-semibold tracking-tight mb-3;
  }

  .h3 {
    @apply text-2xl font-medium tracking-tight mb-3;
  }

  .h4 {
    @apply text-xl font-medium tracking-tight mb-2;
  }

  .h5 {
    @apply text-lg font-medium tracking-tight mb-2;
  }

  .h6 {
    @apply text-base font-medium tracking-tight mb-2;
  }

  .input-field {
    @apply block shadow-sm rounded-md border px-3 py-2 mt-2 w-full
         border-gray-400 dark:border-gray-600
         bg-white dark:bg-gray-800
         text-gray-900 dark:text-gray-100
         focus:outline-none focus:ring-2 focus:ring-sky-700;
  }

  .flash-alert {
    @apply py-2 px-3 mb-5 font-medium rounded-lg
         bg-red-200 dark:bg-red-900
         text-red-700 dark:text-red-200;
  }

  .flash-notice {
    @apply py-2 px-3 mb-5 font-medium rounded-lg
         bg-green-200 dark:bg-green-900
         text-green-700 dark:text-green-200;
  }

  .callout {
    @apply flex items-start gap-3 p-4 border-l-4 border-sky-600 dark:border-sky-800 rounded-lg shadow-sm
         bg-sky-50 dark:bg-sky-950
         text-sky-800 dark:text-sky-200 text-left;
  }

  .callout-icon {
    @apply text-2xl;
  }

  .callout-content {
    @apply flex-1 text-sky-800;
  }
}