/* Shiki syntax highlighting — Catppuccin Latte (light) by default, Mocha (dark) in dark mode */

.shiki {
  padding: 0; /* padding controlled by .code-block pre.shiki in theDocs.css */
  border-radius: 0;
  overflow-x: auto;
}

/* Light mode: let Shiki's inline styles through (Catppuccin Latte) */
.shiki span {
  color: inherit;
  background-color: inherit;
}

/* Line number gutter — Catppuccin Latte */
.shiki code .line::before {
  counter-increment: line;
  content: counter(line);
  display: inline-block;
  width: 3rem;
  margin-right: 1rem;
  text-align: right;
  color: #8c8fa1; /* Catppuccin Latte overlay1 */
  border-right: 1px solid #ccd0da; /* Catppuccin Latte surface1 */
  padding-right: 0.75rem;
  user-select: none;
}

.shiki code {
  counter-reset: line calc(var(--start-line, 1) - 1);
}

/* Dark mode: switch to Catppuccin Mocha via Shiki's CSS variables */
@media (prefers-color-scheme: dark) {
  html:not([data-bs-theme="light"]) .shiki {
    background-color: var(--shiki-dark-bg) !important;
  }
  html:not([data-bs-theme="light"]) .shiki span {
    color: var(--shiki-dark) !important;
    background-color: var(--shiki-dark-bg) !important;
  }
  html:not([data-bs-theme="light"]) .shiki code .line::before {
    color: #585b70; /* Catppuccin Mocha overlay1 */
    border-right-color: #313244; /* Catppuccin Mocha surface1 */
  }
}

/* User-toggled dark mode */
[data-bs-theme="dark"] .shiki {
  background-color: var(--shiki-dark-bg) !important;
}
[data-bs-theme="dark"] .shiki span {
  color: var(--shiki-dark) !important;
  background-color: var(--shiki-dark-bg) !important;
}
[data-bs-theme="dark"] .shiki code .line::before {
  color: #585b70; /* Catppuccin Mocha overlay1 */
  border-right-color: #313244; /* Catppuccin Mocha surface1 */
}