[data-md-color-scheme="default"] {
  --md-default-fg-color: #000000;
  --md-default-fg-color--light: #000000c0;
  --md-default-fg-color--lighter: #00000080;
  --md-default-fg-color--lightest: #00000040;
  --md-default-bg-color: #eee4dc;
  --md-default-bg-color--light: #eee4dcc0;
  --md-default-bg-color--lighter: #eee4dc80;
  --md-default-bg-color--lightest: #eee4dc40;
  --md-primary-fg-color: #062721;
  --md-accent-fg-color: #007b34;
  --md-footer-logo-dark-mode: none;
  --md-footer-logo-light-mode: block;
  --md-typeset-a-color: #007b34;
  --md-typeset-mark-color: #007b34;

  /* Light theme code colors */
  --md-code-bg-color: #f2f5f4; /* Slightly lighter than your bg color for subtle contrast */
  --md-code-fg-color: #062721; /* Dark text for contrast */

  /* Code highlight colors - using your light mode accent */
  --md-code-hl-color: #007b34; /* Your light mode accent green */
  --md-code-hl-color--light: #0e854433; /* Light accent background */

  /* Syntax highlighting for light theme */
  --md-code-hl-number-color: #e69f00; /* Orange for numbers */
  --md-code-hl-special-color: #cc79a7; /* Red-purple for special chars */
  --md-code-hl-function-color: #009e73; /* Blue-green for functions */
  --md-code-hl-constant-color: #007b34; /* Your accent green for constants */
  --md-code-hl-keyword-color: #0072b2; /* Blue for keywords */
  --md-code-hl-string-color: #d55e00; /* Vermillion for strings */
  --md-code-hl-name-color: #062721; /* Your dark green for names */
  --md-code-hl-operator-color: #062721c0; /* Dark green with opacity */
  --md-code-hl-punctuation-color: #062721c0; /* Dark green with opacity */
  --md-code-hl-comment-color: #6b7280; /* Gray for comments */
  --md-code-hl-generic-color: #062721c0; /* Dark green with opacity */
  --md-code-hl-variable-color: #062721c0; /* Dark green with opacity */
}

[data-md-color-scheme="slate"] {
  color-scheme: dark;
  --md-default-fg-color: #f2f5f4;
  --md-default-fg-color--light: #f2f5f4c0;
  --md-default-fg-color--lighter: #f2f5f480;
  --md-default-fg-color--lightest: #f2f5f440;
  --md-default-bg-color: #223536;
  --md-default-bg-color--light: #223536c0;
  --md-default-bg-color--lighter: #22353680;
  --md-default-bg-color--lightest: #22353640;
  --md-primary-fg-color: #062721;
  --md-accent-fg-color: #14f279;
  --md-footer-logo-dark-mode: none;
  --md-footer-logo-light-mode: block;
  --md-typeset-a-color: #14f279;
  --md-typeset-mark-color: #14f279;

  /* Dark theme code colors */
  --md-code-bg-color: #062721; /* Slightly darker than your bg color */
  --md-code-fg-color: #f2f5f4; /* Light text for contrast */

  /* Code highlight colors - using your dark mode accent */
  --md-code-hl-color: #14f279; /* Your dark mode accent green */
  --md-code-hl-color--light: #14f2791a; /* Light accent background */

  /* Syntax highlighting for dark theme */
  --md-code-hl-number-color: #ffc14d; /* Brightened orange */
  --md-code-hl-special-color: #ff9ed2; /* Brightened red-purple */
  --md-code-hl-function-color: #00d49b; /* Brightened blue-green */
  --md-code-hl-constant-color: #14f279; /* Your accent green */
  --md-code-hl-keyword-color: #56b4e9; /* Sky blue */
  --md-code-hl-string-color: #ff8f4d; /* Brightened vermillion */
  --md-code-hl-name-color: #f2f5f4; /* Light text */
  --md-code-hl-operator-color: #f2f5f4c0; /* Light text with opacity */
  --md-code-hl-punctuation-color: #f2f5f4c0; /* Light text with opacity */
  --md-code-hl-comment-color: #8b949e; /* Light gray */
  --md-code-hl-generic-color: #f2f5f4c0; /* Light text with opacity */
  --md-code-hl-variable-color: #f2f5f4c0; /* Light text with opacity */
}



/* Update size of the main title next to the logo */
.md-header__title {
  font-size: 1.2rem;
  line-height: 2.7rem;
}

/* Update size of the logo to align with the title */
.md-header__button.md-logo img {
  height: 1.6rem;
}

.language-md,
.language-markdown {
  --lang-name: "markdown";
  position: relative;
}

.language-js,
.language-javascript {
  --lang-name: "javascript";
  position: relative;
}

.language-sh,
.language-shell,
.language-shell-session,
.language-console {
  --lang-name: "shell";
  position: relative;
}

.language-pwsh,
.language-powershell,
.language-pwsh-session {
  --lang-name: "pwsh";
  position: relative;
}

.language-doscon {
  --lang-name: "cmd";
  position: relative;
}

.language-py,
.language-python {
  --lang-name: "python";
  position: relative;
}

.language-pycon,
.language-output {
  --lang-name: "output";
  position: relative;
  box-sizing: border-box;
  margin-bottom: 1em; /* Add space between consecutive blocks */
}

.language-sql {
  --lang-name: "sql";
  position: relative;
}

.language-tsql {
  --lang-name: "t-sql";
  position: relative;
}

.language-mysql {
  --lang-name: "mysql";
  position: relative;
}

.language-postgresql {
  --lang-name: "postgresql";
  position: relative;
}

.language-sqlite3 {
  --lang-name: "sqlite";
  position: relative;
}

/* Color-specific background colors */
[data-md-color-scheme="slate"] .language-output,
[data-md-color-scheme="slate"] .language-pycon {
  --md-code-bg-color: #223536;
}

[data-md-color-scheme="default"] .language-output,
[data-md-color-scheme="default"] .language-pycon {
  --md-code-bg-color: #eee4dc;
}

/* Common styles for both modes */
.language-output pre,
.language-pycon pre {
  border: 1px solid var(--md-code-hl-constant-color);
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  border-radius: .2rem;
  background-clip: padding-box;
  padding: 1px;
}

/* Error styles for both modes */
.error pre {
  border-color: red;
}

.error pre > code:hover {
  scrollbar-color: red #0000;
}

/* Warning styles for both modes */
.warning pre {
  border-color: yellow;
}

.warning pre > code:hover {
  scrollbar-color: yellow #0000;
}

[data-md-color-scheme="slate"] figure.output {
  border: 1px solid var(--md-code-hl-constant-color);
  border-radius: .2rem;
  padding: 1px;
  margin: 0;
  box-sizing: border-box;
}

figure.output {
  border: 1px solid var(--md-code-hl-constant-color);
  border-radius: .2rem;
  padding: 1px;
  margin: 1em 0;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;  /* Add this for absolute positioning of pseudo-element */
}

figure.output::after {
  background: rgba(128, 128, 128, 0.3);
  content: "output";
  font-size: 0.75em;
  position: absolute;
  top: 0.75em;
  right: 3.5em;  /* Match the spacing of code blocks */
  padding: 0.125em 0.375em;
  width: fit-content;
  z-index: 1;
  border-radius: 0.25em;
}

figure.output img {
  max-width: 100%;
  height: auto;
}
.highlight:not(.inline-highlight)[class*="language-"]::after {
  background: rgba(128, 128, 128, 0.3);
  content: var(--lang-name);
  font-size: 0.75em;
  position: absolute;
  top: 0.75em;
  right: 3.5em; /* Increased from 1em to leave space for copy button */
  padding: 0.125em 0.375em;
  width: fit-content;
  z-index: 1;
  border-radius: 0.25em;
}