@import "tailwindcss";

/* :root {
  --font-display: "Satoshi", "sans-serif";
} */
@theme {
  --font-sans: "font", sans-serif;
}


body {
  @apply font-sans text-gray-800;
}

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

.container {
  @apply mx-auto px-4;
}

/* Responsive adjustments for common elements */
h1 {
  @apply text-3xl font-bold mb-4;
}

h2 {
  @apply text-2xl font-semibold mb-3;
}

p {
  @apply mb-2;
}

/* Form styling */
.field {
  @apply mb-4;
}

.field label {
  @apply block text-gray-700 text-sm font-bold mb-2;
}

.field input[type="text"],
.field input[type="email"],
.field textarea {
  @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight;
}

.actions input[type="submit"],
.btn {
  @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.btn-secondary {
  @apply bg-gray-500 hover:bg-gray-700;
}

/* Flash messages */
.notice {
  @apply bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-4;
}

.alert {
  @apply bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4;
}

@layer components {}