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

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 240 5.9% 10%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 240 10% 3.9%;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
    --radius: 0.5rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 0 0% 98%;
    --primary-foreground: 240 5.9% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 240 3.7% 15.9%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 240 4.9% 83.9%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    /* Prevent layout shifts */
    overflow-x: hidden;
    scroll-behavior: smooth;
  }

  /* Improve font loading and prevent FOIT/FOUT */
  @font-face {
    font-family: 'system-ui';
    font-display: swap;
  }

  /* Prevent layout shifts for images */
  img {
    max-width: 100%;
    height: auto;
    display: block;
  }

  /* Optimize button interactions */
  button, a, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  /* Prevent cumulative layout shift */
  .container {
    contain: layout style paint;
  }
}

/* Reset and override all conflicting styles for blog content */
.blog-content * {
  all: revert !important;
}

.blog-content {
  line-height: 1.7 !important;
  font-size: 1.1rem !important;
  color: #374151 !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif !important;
}

.blog-content h1 {
  font-size: 2rem !important;
  font-weight: 700 !important;
  margin: 1.5rem 0 1rem 0 !important;
  color: #1f2937 !important;
  display: block !important;
  line-height: 1.2 !important;
}

.blog-content h2 {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  margin: 1.25rem 0 0.75rem 0 !important;
  color: #1f2937 !important;
  display: block !important;
  line-height: 1.3 !important;
}

.blog-content h3 {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin: 1rem 0 0.5rem 0 !important;
  color: #1f2937 !important;
  display: block !important;
  line-height: 1.4 !important;
}

.blog-content p {
  margin: 1rem 0 !important;
  line-height: 1.7 !important;
  display: block !important;
  color: #374151 !important;
}

.blog-content strong, 
.blog-content b {
  font-weight: 700 !important;
  color: #1f2937 !important;
}

.blog-content em, 
.blog-content i {
  font-style: italic !important;
}

.blog-content u {
  text-decoration: underline !important;
}

.blog-content ul, 
.blog-content ol {
  margin: 1rem 0 !important;
  padding-left: 2rem !important;
  display: block !important;
}

.blog-content li {
  margin: 0.5rem 0 !important;
  display: list-item !important;
  line-height: 1.6 !important;
}

.blog-content ul li {
  list-style-type: disc !important;
  list-style-position: outside !important;
}

.blog-content ol li {
  list-style-type: decimal !important;
  list-style-position: outside !important;
}

.blog-content blockquote {
  border-left: 4px solid #3b82f6 !important;
  background: #f8fafc !important;
  padding: 1rem !important;
  margin: 1.5rem 0 !important;
  font-style: italic !important;
  display: block !important;
  color: #4b5563 !important;
}

.blog-content a {
  color: #3b82f6 !important;
  text-decoration: underline !important;
}

.blog-content a:hover {
  color: #1d4ed8 !important;
}

.blog-content img {
  max-width: 100% !important;
  height: auto !important;
  margin: 1rem 0 !important;
  border-radius: 0.5rem !important;
}

.blog-content br {
  display: block !important;
  margin: 0.5rem 0 !important;
  content: "" !important;
}

/* Performance optimizations for Core Web Vitals */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Prevent layout shifts for dynamic content */
.dynamic-content {
  min-height: 200px;
  contain: layout style paint;
}

/* Optimize image loading */
.optimized-img {
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
  will-change: auto;
}

/* Improve button performance */
.btn-optimized {
  will-change: transform;
  transition: transform 0.1s ease;
  contain: style layout paint;
}

.btn-optimized:active {
  transform: scale(0.98);
}

/* Optimize card animations */
.card-optimized {
  contain: layout style paint;
  will-change: auto;
}

/* Reduce main thread blocking */
.heavy-content {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* Optimize scroll performance */
.scroll-container {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Prevent flash of unstyled content */
.fade-in {
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}