:root {
  /* Site-themed code colors */
  --code-bg: #1b4d3e;
  --code-border: #cba135;
  --code-text: #f5f5f2;
  --code-keyword: #cba135;
  --code-string: #7ee787;
  --code-number: #79c0ff;
  --code-function: #d2a8ff;
  --code-comment: #8b949e;
  --code-operator: #cba135;
  --code-variable: #ffa657;
  --code-property: #79c0ff;
  --code-builtin: #ffa657;
  --code-tag: #7ee787;
  --code-attr: #79c0ff;
}

/* Code block styling */
pre {
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 16px;
  margin: 16px 0;
  overflow-x: auto;
  font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
}

pre code {
  background: transparent;
  color: var(--code-text);
  padding: 0;
  border: none;
  font-size: inherit;
}

/* Inline code styling - matches code block color scheme */
code {
  background: var(--code-bg);
  color: var(--code-text);
  padding: 0.2em 0.4em;
  border-radius: 6px;
  font-family: "Consolas", "Monaco", "Menlo", "Ubuntu Mono", monospace;
  font-size: 85%;
  border: 1px solid var(--code-border);
}

/* Language-specific syntax highlighting */
code.language-bash,
code.language-shell,
code.language-json,
code.language-python,
code.language-javascript,
code.language-ziggy {
  color: var(--code-text);
}

/* Keywords */
.token.keyword,
.token.control,
.token.directive,
.token.unit,
code .keyword {
  color: var(--code-keyword);
  font-weight: 600;
}

/* Strings */
.token.string,
.token.char,
code .string {
  color: var(--code-string);
}

/* Numbers */
.token.number,
.token.boolean,
.token.constant,
code .number {
  color: var(--code-number);
}

/* Functions */
.token.function,
.token.method,
code .function {
  color: var(--code-function);
}

/* Comments */
.token.comment,
code .comment {
  color: var(--code-comment);
  font-style: italic;
}

/* Operators */
.token.operator,
.token.punctuation,
code .operator {
  color: var(--code-text);
}

/* Variables */
.token.variable,
.token.parameter,
code .variable {
  color: var(--code-variable);
}

/* Properties */
.token.property,
.token.attr-name,
code .property {
  color: var(--code-property);
}

/* Built-ins */
.token.builtin,
.token.class-name,
code .builtin {
  color: var(--code-builtin);
}

/* Bash/Shell specific */
.token.bash,
.token.shell {
  color: var(--code-text);
}

.token.bash .function,
.token.shell .function {
  color: var(--code-function);
}

/* JSON specific */
.token.json .property {
  color: var(--code-property);
}

.token.json .string {
  color: var(--code-string);
}

/* Python specific */
.token.python .keyword {
  color: var(--code-keyword);
}

.token.python .function {
  color: var(--code-function);
}

.token.python .string {
  color: var(--code-string);
}

/* Tags (HTML/XML) */
.token.tag {
  color: var(--code-tag);
}

.token.attr-name {
  color: var(--code-attr);
}

.token.attr-value {
  color: var(--code-string);
}

/* Responsive design for code blocks */
@media (max-width: 768px) {
  pre {
    padding: 12px;
    font-size: 13px;
    margin: 12px 0;
  }

  code:not(pre code) {
    font-size: 0.85em;
    padding: 1px 4px;
  }
}

@media (max-width: 480px) {
  pre {
    padding: 8px;
    font-size: 12px;
    margin: 8px 0;
  }
}