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

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Dark mode friendly table styles */
article table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
  background-color: #18181b; /* zinc-950 */
  border: 1px solid #3f3f46; /* zinc-700 */
  border-radius: 0.5rem;
  overflow: hidden;
}

article th {
  background-color: #27272a; /* zinc-800 */
  color: #e4e4e7;
  font-weight: 600;
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #3f3f46;
}

article td {
  padding: 0.75rem 1rem;
  color: #d1d5db; /* zinc-300 */
  border-bottom: 1px solid #3f3f46;
}

article tr:last-child td {
  border-bottom: none;
}

article table a {
  color: #67e8f9;
}

/* Ensure inline code has dark bg */
article code {
  background-color: #27272a;
  padding: 0.125rem 0.375rem;
  border-radius: 0.375rem;
  font-size: 0.875em;
  color: #e4e4e7;
}

/* === IMPROVED READABILITY FOR BLOG POSTS === */
/* Targets the .prose container where the actual markdown content lives.
   Much stronger spacing, larger text, better contrast and hierarchy for dark theme.
   This should make the body text far more readable. */

.prose {
  font-size: 1.125rem;           /* slightly larger base size */
  line-height: 1.9;              /* generous line height for readability */
  color: #e5e7eb;                /* soft light gray for body text */
  max-width: none;
}

.prose h1 {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-top: 0.5rem;
  margin-bottom: 1.75rem;
  color: #f3f4f6;
}

.prose h2 {
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.25;
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
  color: #f3f4f6;
  border-bottom: 1px solid #374151;
  padding-bottom: 0.5rem;
}

.prose h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.35;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #f3f4f6;
}

.prose p {
  margin-bottom: 1.75rem;
}

.prose blockquote {
  margin: 1rem 0;
  padding: 0.75rem 1.25rem 0.5rem 1.25rem; /* reduced bottom padding to minimize extra space */
  border-left: 5px solid #4b5563;
  background-color: #1f2937;
  font-style: italic;
  color: #d1d5db;
  border-radius: 0.5rem;
  font-size: 1.05rem;
}

.prose ul,
.prose ol {
  margin: 1.75rem 0;
  padding-left: 2rem;
}

.prose li {
  margin-bottom: 0.75rem;
  line-height: 1.85;
}

.prose strong {
  font-weight: 700;
  color: #f3f4f6;
}

.prose em {
  font-style: italic;
  color: #d1d5db;
}

/* Code blocks - now fully handled by custom JS window in posts.html for uniform background.
   Keeping only inline code styles here. */
.prose pre {
  /* background/padding/border removed - custom code windows provide uniform bg and styling */
  overflow-x: auto;
  margin: 2rem 0;
}

.prose code {
  background-color: #374151;
  padding: 0.25em 0.5em;
  border-radius: 0.375rem;
  font-size: 0.925em;
  color: #f3f4f6;
}

/* Make the layout title h1 also nice (it sits outside .prose) */
article h1 {
  font-size: 2.75rem;
  font-weight: 700;
  line-height: 1.1;
  color: #f3f4f6;
  margin-bottom: 0.75rem;
}