@import "tailwindcss";

@theme {
  --color-background-100: #f5f5f5;
  --color-background-200: #e8e7e4;
}

@layer base {
  html {
    @apply antialiased;
  }

  body {
    @apply bg-white text-gray-900 leading-relaxed px-5 py-8 max-w-3xl mx-auto;
  }

  h1 {
    @apply text-3xl font-bold tracking-tight text-gray-900 mb-4;
  }

  h2 {
    @apply text-2xl font-semibold tracking-tight text-gray-900 mb-3;
  }

  h3 {
    @apply text-xl font-semibold text-gray-900 mb-2;
  }

  p {
    @apply text-base text-gray-700 mb-4;
  }

  a {
    @apply text-gray-900 underline decoration-gray-400 underline-offset-2 hover:text-black hover:decoration-gray-600 transition-colors;
  }

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

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="submit"] {
    @apply mb-4 block w-full rounded-lg border border-gray-300 bg-gray-50 py-2.5 px-3 text-base text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-gray-600 focus:ring-2 focus:ring-gray-900/10 focus:outline-none transition;
  }

  textarea {
    @apply mb-4 block w-full rounded-lg border border-gray-300 bg-gray-50 py-2.5 px-3 text-base text-gray-900 shadow-sm placeholder:text-gray-400 focus:border-gray-600 focus:ring-2 focus:ring-gray-900/10 focus:outline-none transition;
  }

  select {
    @apply mb-4 block w-full rounded-lg border border-gray-300 bg-gray-50 py-2.5 px-3 text-base text-gray-900 shadow-sm focus:border-gray-600 focus:ring-2 focus:ring-gray-900/10 focus:outline-none transition;
    @apply appearance-none pl-2.5 pr-10;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.25em 1.25em;
  }

  button,
  input[type="submit"] {
    @apply inline-flex items-center justify-center rounded-lg bg-gray-900 px-4 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900/20 active:bg-black transition cursor-pointer;
  }

  table {
    @apply w-full text-left text-sm;
  }

  th {
    @apply border-b border-gray-200 py-2 px-3 font-semibold text-gray-900;
  }

  td {
    @apply border-b border-gray-100 py-2 px-3 text-gray-700;
  }

  hr {
    @apply my-8 border-gray-200;
  }

  ul {
    @apply list-disc pl-5 mb-4 text-gray-700;
  }

  ol {
    @apply list-decimal pl-5 mb-4 text-gray-700;
  }

  li {
    @apply mb-1;
  }

  blockquote {
    @apply border-l-4 border-gray-300 pl-4 italic text-gray-600 mb-4;
  }

  code {
    @apply rounded bg-gray-100 px-1.5 py-0.5 text-sm font-mono text-gray-800;
  }

  pre {
    @apply mb-4 overflow-x-auto rounded-lg bg-gray-100 p-4 text-sm font-mono text-gray-800;
  }
}