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

@layer base {
  body {
    font-family: 'Inter', sans-serif;
  }
}

@layer components {
  .prose {
    @apply max-w-none prose-lg prose-gray dark:prose-invert dark:prose-p:text-gray-300 dark:prose-headings:text-gold;
  }
}

/* Theme transition */
.theme-transition {
  transition-property: background-color, border-color, color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 200ms;
}

/* Progressive image loading styles */
img {
  transition: filter 0.3s ease-out;
}

img[data-progressive]:not(.loaded) {
  filter: blur(10px);
}

img.loaded {
  filter: blur(0);
}

/* Prevent layout shift while loading */
img {
  aspect-ratio: attr(width) / attr(height);
}