burmddit/frontend/app/globals.css

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

@layer base {
  body {
    @apply bg-gray-50 text-gray-900;
  }
}

/* Burmese font support */
@font-face {
  font-family: 'Pyidaungsu';
  src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Pyidaungsu';
  src: url('https://myanmar-tools-website.appspot.com/fonts/Pyidaungsu-2.5.3_Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

/* Article content styling */
.article-content {
  @apply font-burmese text-gray-800 leading-relaxed;
}

.article-content h1 {
  @apply text-3xl font-bold mt-8 mb-4;
}

.article-content h2 {
  @apply text-2xl font-bold mt-6 mb-3;
}

.article-content h3 {
  @apply text-xl font-semibold mt-4 mb-2;
}

.article-content p {
  @apply mb-4 text-lg leading-loose;
}

.article-content a {
  @apply text-primary-600 hover:text-primary-700 underline;
}

.article-content ul, .article-content ol {
  @apply ml-6 mb-4 space-y-2;
}

.article-content li {
  @apply text-lg;
}

.article-content code {
  @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
}

.article-content pre {
  @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto mb-4;
}

.article-content blockquote {
  @apply border-l-4 border-primary-500 pl-4 italic my-4;
}

/* Card hover effects */
.article-card {
  @apply transition-transform duration-200 hover:scale-105 hover:shadow-xl;
}

/* Loading skeleton */
.skeleton {
  @apply animate-pulse bg-gray-200 rounded;
}