:root {
  /* Light theme variables */
  --background: #f0f0f0;
  --text: #000000;
  --sub-text: #800000;
  --sub-text-2: #8d0000;
  --image: #800000;
  --mention-text: #740000;
  --nav-bar: #f0f0f0;
  --border: #800000;
  --active: #740000;
  --passive: #9a0000;
}

/* Dark theme variables */
:root.dark {
  --background: #111111;
  --text: #ffffff;
  --sub-text: #777777;
  --sub-text-2: #999999;
  --image: #777777;
  --mention-text: #e18d58;
  --nav-bar: #333333;
  --border: #f0f0f0;
  --active: #777777;
  --passive: #555555;
}

/* Base styles */
body {
  background-color: var(--background);
  color: var(--text);
}

/* Utility classes */
.text-sub {
  color: var(--sub-text);
}

.text-sub-2 {
  color: var(--sub-text-2);
}

.mention {
  color: var(--mention-text);
}

.nav-bg {
  background-color: var(--nav-bar);
}

.border-theme {
  border-color: var(--border);
}

.active {
  color: var(--active);
}

.passive {
  color: var(--passive);
} 

/* Markdown content styling */
.markdown-content {
  line-height: 1.6;
}

.markdown-content h1,
.markdown-content h2,
.markdown-content h3,
.markdown-content h4,
.markdown-content h5,
.markdown-content h6 {
  margin-top: 1em;
  margin-bottom: 0.5em;
  font-weight: 600;
}

.markdown-content p {
  margin-bottom: 1em;
}

.markdown-content ul,
.markdown-content ol {
  margin-left: 1.5em;
  margin-bottom: 1em;
}

.markdown-content a {
  color: #2563eb;
  text-decoration: underline;
}

.markdown-content code {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 0.2em 0.4em;
  border-radius: 3px;
  font-family: monospace;
}

.markdown-content pre {
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1em;
  border-radius: 5px;
  overflow-x: auto;
  margin-bottom: 1em;
}

.markdown-content blockquote {
  border-left: 4px solid #e5e7eb;
  padding-left: 1em;
  margin-left: 0;
  margin-bottom: 1em;
  color: #6b7280;
}

.markdown-content img {
  max-width: 100%;
  height: auto;
}

.markdown-content table {
  border-collapse: collapse;
  width: 100%;
  margin-bottom: 1em;
}

.markdown-content th,
.markdown-content td {
  border: 1px solid #e5e7eb;
  padding: 0.5em;
}

.markdown-content th {
  background-color: rgba(0, 0, 0, 0.05);
}