@tailwind base;
@tailwind components;
@tailwind utilities;
@plugin "@tailwindcss/typography";
@config "../tailwind.config.js";

/* Base typography improvements */
@layer base {
  body {
    @apply bg-white text-gray-800 antialiased leading-relaxed;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }

  a {
    @apply text-blue-600 hover:underline transition;
  }

  input, textarea, button {
    @apply outline-none focus:ring focus:ring-blue-200 focus:ring-opacity-50;
  }

  textarea {
    @apply resize-y;
  }
}

/* Reusable components */
@layer components {
  .btn {
    @apply inline-block px-4 py-2 rounded-md font-medium shadow-sm transition;
  }

  .btn-primary {
    @apply btn bg-blue-600 text-white hover:bg-blue-700;
  }

  .btn-danger {
    @apply btn bg-red-600 text-white hover:bg-red-700;
  }

  .btn-outline {
    @apply btn border border-gray-300 text-gray-800 hover:bg-gray-100;
  }

  .card {
    @apply p-4 border border-gray-200 rounded-xl bg-white shadow-sm hover:shadow transition;
  }

  .section-title {
    @apply text-2xl font-semibold mb-4 border-b pb-2;
  }

  .form-field {
    @apply block w-full rounded-md border border-gray-300 shadow-sm mt-1;
  }

  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }
}

/* Utility overrides or extras */
@layer utilities {
  .text-muted {
    @apply text-gray-500;
  }

  .max-w-read {
    @apply max-w-prose mx-auto;
  }
}