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

:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  background-color: #242424;

  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  display: flex;
  place-items: center;
  min-width: 320px;
  min-height: 100vh;
}

#app {
  width: 100%;
  margin: 0 auto;
}

/* Markdown 渲染基础样式 */
.markdown-body {
  @apply text-slate-700;
  padding: 0 1rem;
}

.markdown-body h1 {
  @apply text-lg font-black mt-4 mb-2 text-slate-900;
}

.markdown-body h2 {
  @apply text-base font-black mt-3 mb-2 text-slate-900;
}

.markdown-body h3 {
  @apply text-sm font-black mt-2 mb-1 text-slate-800;
}

.markdown-body p {
  @apply mb-2 last:mb-0;
}

.markdown-body ul, .markdown-body ol {
  @apply pl-4 mb-2 list-outside;
}

.markdown-body ul {
  @apply list-disc;
}

.markdown-body ol {
  @apply list-decimal;
}

.markdown-body li {
  @apply mb-1;
}

.markdown-body code {
  @apply px-1 py-0.5 bg-slate-100 rounded text-[0.9em] font-mono text-orange-600;
}

.markdown-body pre {
  @apply p-3 bg-slate-900 text-slate-100 rounded-lg overflow-x-auto mb-3 font-mono text-[0.85em];
}

.markdown-body blockquote {
  @apply pl-3 border-l-4 border-slate-200 text-slate-500 italic mb-2;
}

.markdown-body a {
  @apply text-orange-500 hover:underline;
}

.markdown-body table {
  @apply w-full border-collapse mb-3;
}

.markdown-body th, .markdown-body td {
  @apply border border-slate-200 p-2 text-left;
}

.markdown-body th {
  @apply bg-slate-50 font-bold;
}

.markdown-body hr {
  @apply my-4 border-t border-slate-100;
}