/* Custom color overrides - Campbell/Monokai Dark inspired gray palette */
/* Overrides Gruvbox brown tones with cooler grays */

:root[data-theme="light"] {
  /* Light mode - Campbell/Monokai Light inspired - cool light grays */
  --bg0: #fafafa;      /* Very light gray */
  --bg0_h: #ffffff;    /* Pure white */
  --bg0_s: #f5f5f5;    /* Slightly darker */
  --bg1: #e8e8e8;     /* Light gray */
  --bg2: #d4d4d4;     /* Medium light gray */
  --bg3: #c0c0c0;     /* Medium gray */
  --bg4: #a8a8a8;     /* Darker gray */
  
  /* Foreground - dark grays and blacks */
  --fg0: #1e1e1e;      /* Near black */
  --fg1: #2d2d2d;      /* Dark gray */
  --fg2: #3e3e3e;      /* Medium dark gray */
  --fg3: #4e4e4e;      /* Medium gray */
  --fg4: #5e5e5e;      /* Lighter gray */
  
  /* Accent colors - Campbell/Monokai inspired */
  --gray1: #5e5e5e;
  --gray2: #808080;
  
  /* Muted accent colors for light mode */
  --red1: #cd3131;     /* Campbell red */
  --red2: #a12626;
  --green1: #0dbc79;   /* Campbell green */
  --green2: #0a9d63;
  --yellow1: #2a86ff;  /* Replaced yellow with cool blue */
  --yellow2: #1f6bd6;
  --blue1: #2472c8;    /* Campbell blue */
  --blue2: #1d5ba0;
  --purple1: #bc3fbc;  /* Muted purple */
  --purple2: #963096;
  --aqua1: #11a8cd;    /* Campbell cyan */
  --aqua2: #0d87a3;
  --orange1: #e9813a;  /* Muted orange */
  --orange2: #ba682e;
}

:root[data-theme="dark"] {
  /* Campbell/Monokai Dark inspired backgrounds - cool grays */
  --bg0: #0c0c0c;      /* Campbell black */
  --bg0_h: #0c0c0c;    /* Slightly darker */
  --bg0_s: #1c1c1c;    /* Slightly lighter */
  --bg1: #1e1e1e;      /* Monokai dark */
  --bg2: #2d2d2d;      /* Medium gray */
  --bg3: #3e3e3e;      /* Lighter gray */
  --bg4: #4e4e4e;      /* Even lighter */
  
  /* Foreground - cool grays and whites */
  --fg0: #cccccc;      /* Light gray */
  --fg1: #d4d4d4;      /* Monokai foreground */
  --fg2: #b4b4b4;      /* Medium gray */
  --fg3: #9e9e9e;      /* Darker gray */
  --fg4: #808080;      /* Muted gray */
  
  /* Accent colors - Campbell/Monokai inspired */
  --gray1: #808080;
  --gray2: #6a6a6a;
  
  /* Keep some color for accents but muted */
  --red1: #cd3131;     /* Campbell red */
  --red2: #f14c4c;
  --green1: #0dbc79;   /* Campbell green */
  --green2: #23d18b;
  --yellow1: #2a86ff;  /* Replaced yellow with cool blue */
  --yellow2: #5aa8ff;
  --blue1: #2472c8;    /* Campbell blue */
  --blue2: #3b8eea;
  --purple1: #bc3fbc;  /* Muted purple */
  --purple2: #d670d6;
  --aqua1: #11a8cd;    /* Campbell cyan */
  --aqua2: #29b8db;
  --orange1: #e9813a;  /* Muted orange */
  --orange2: #ffa348;
}

/* Readability improvements for blog posts */
.post-content {
  /* Optimal reading width - 65-75 characters per line */
  max-width: 65ch;
  margin-left: auto;
  margin-right: auto;
  
  /* Better line height for readability */
  line-height: 1.8;
  
  /* Improved paragraph spacing */
}

/* Better paragraph spacing */
.post-content p {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}

/* Better spacing for lists */
.post-content ul,
.post-content ol {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 2em;
}

.post-content ul li,
.post-content ol li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.7;
}

/* Better heading spacing */
.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  margin-top: 1.5em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

/* Better code block spacing */
.post-content pre {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding: 1.25em;
  line-height: 1.6;
  overflow-x: auto;
}

/* Better blockquote spacing */
.post-content blockquote {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1em;
  font-style: italic;
  border-left: 3px solid var(--primary);
}

/* Better table spacing */
.post-content table {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

/* Better image spacing */
.post-content img {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}

/* Better horizontal rule spacing */
.post-content hr {
  margin-top: 2.5em;
  margin-bottom: 2.5em;
  border: none;
  border-top: 2px solid var(--primary);
  opacity: 0.35;
}

/* First paragraph after heading should have less top margin */
.post-content h1 + p,
.post-content h2 + p,
.post-content h3 + p,
.post-content h4 + p,
.post-content h5 + p,
.post-content h6 + p {
  margin-top: 0.75em;
}

/* Better inline code readability */
.post-content code {
  padding: 0.15em 0.4em;
  font-size: 0.9em;
}

/* Better link visibility */
.post-content a {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: opacity 0.2s;
}

.post-content a:hover {
  opacity: 0.8;
}

.post-description {
  font-size: 1.1em;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.post-content h2,
.post-content h3 {
  position: relative;
}

.post-content h2::after,
.post-content h3::after {
  content: "";
  display: block;
  height: 2px;
  width: 2.5rem;
  margin-top: 0.4rem;
  background: var(--primary);
  opacity: 0.5;
}

.module-links {
  margin: 1.5rem 0;
  padding: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
}

.module-links__heading {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: 1rem;
  font-weight: 600;
}

.module-links__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.module-links__item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: opacity 0.2s;
}

.module-links__item:hover {
  opacity: 0.85;
}

.module-links__item svg {
  fill: var(--fg);
  width: 16px;
  height: 16px;
}

.footer__author {
  margin-left: 0.5rem;
}

/* Improve overall body text readability */
body {
  font-size: 1.0625rem; /* 17px base, slightly larger than default 16px */
  line-height: 1.75;
}

/* Better readability on larger screens */
@media (min-width: 768px) {
  .post-content {
    font-size: 1.125rem; /* 18px on larger screens */
    line-height: 1.8;
  }
}