/* Shared styles for blog pages: Gruvbox Dark theme (matches index.html) */
:root {
  --bg-dark: #282828;
  --bg-light: #3c3836;
  --fg-light: #ebdbb2;
  --accent: #fabd2f;
  --accent-alt: #fe8019;
}

body {
  background-color: var(--bg-dark);
  color: var(--fg-light);
}

article {
  line-height: 1.7;
}

article h2 {
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 2.5rem 0 0.75rem;
}

article h3 {
  color: var(--accent);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 2rem 0 0.5rem;
}

article h4 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
}

article p {
  margin: 0.75rem 0;
}

article ul {
  list-style: disc;
  margin: 0.75rem 0 0.75rem 1.5rem;
}

article ul ul {
  list-style: circle;
  margin-top: 0.25rem;
  margin-bottom: 0.25rem;
}

article li {
  margin: 0.25rem 0;
}

article a {
  color: var(--accent);
  text-decoration: none;
}

article a:hover {
  color: var(--accent-alt);
}

article pre {
  background-color: var(--bg-light);
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  margin: 1rem 0;
  font-size: 0.875rem;
  line-height: 1.5;
}

article code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background-color: var(--bg-light);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
}

article pre code {
  background: none;
  padding: 0;
}

article img {
  max-width: 100%;
  border-radius: 0.5rem;
  margin: 1rem auto;
}