@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;600;800&display=swap');
@import "tailwindcss";

@theme {
  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-display: "Outfit", sans-serif;
}

@layer base {
  body {
    @apply bg-slate-50 text-slate-900 font-sans;
  }
}

/* --- Global Components --- */
.glass-card {
  @apply bg-white/80 backdrop-blur-md border border-white/20 shadow-xl;
}

.hero-gradient {
  background: radial-gradient(circle at 50% 0%, #f1f5f9 0%, #e2e8f0 100%);
}

.hidden {
  display: none;
}

/* --- Home Page Specific --- */
.home-hero {
  @apply pt-20 pb-32 px-4;
}

/* --- Blog Page Specific --- */
.blog-post-card {
  @apply p-6 rounded-3xl bg-white border border-slate-100 shadow-sm hover:shadow-md transition-shadow;
}

/* --- About Page Specific --- */
.about-section {
  @apply py-20 px-4 max-w-4xl mx-auto;
}

/* --- Contact Page Specific --- */
.contact-form-input {
  @apply w-full px-4 py-3 rounded-xl border border-slate-200 focus:ring-2 focus:ring-black focus:border-transparent outline-none transition-all;
}