/*
 * Code Syntax Highlighting Theme
 *
 * Uses Collavre design tokens (--color-code-bg, --color-code-text, --font-mono).
 * Syntax color tokens defined as CSS variables — overridden per theme context.
 * Based on GitHub-style highlighting.
 */

/* ============================================================================
 * SYNTAX COLOR TOKENS (light mode defaults)
 * ============================================================================ */
:root {
  --syntax-comment: #6a737d;
  --syntax-keyword: #d73a49;
  --syntax-string: #032f62;
  --syntax-number: #005cc5;
  --syntax-builtin: #6f42c1;
  --syntax-title: #6f42c1;
  --syntax-attr: #005cc5;
  --syntax-variable: #e36209;
  --syntax-regexp: #032f62;
  --syntax-tag: #22863a;
  --syntax-name: #22863a;
  --syntax-selector: #6f42c1;
  --syntax-meta: #6a737d;
  --syntax-deletion-text: #b31d28;
  --syntax-deletion-bg: #ffeef0;
  --syntax-addition-text: #22863a;
  --syntax-addition-bg: #f0fff4;
}

/* ============================================================================
 * DARK MODE SYNTAX TOKENS
 * ============================================================================ */
body.dark-mode {
  --syntax-comment: #8b949e;
  --syntax-keyword: #ff7b72;
  --syntax-string: #a5d6ff;
  --syntax-number: #79c0ff;
  --syntax-builtin: #d2a8ff;
  --syntax-title: #d2a8ff;
  --syntax-attr: #79c0ff;
  --syntax-variable: #ffa657;
  --syntax-regexp: #a5d6ff;
  --syntax-tag: #7ee787;
  --syntax-name: #7ee787;
  --syntax-selector: #d2a8ff;
  --syntax-meta: #8b949e;
  --syntax-deletion-text: #ffa198;
  --syntax-deletion-bg: rgba(248, 81, 73, 0.15);
  --syntax-addition-text: #7ee787;
  --syntax-addition-bg: rgba(63, 185, 80, 0.15);
}

@media (prefers-color-scheme: dark) {
  body:not(.light-mode):not(.dark-mode) {
    --syntax-comment: #8b949e;
    --syntax-keyword: #ff7b72;
    --syntax-string: #a5d6ff;
    --syntax-number: #79c0ff;
    --syntax-builtin: #d2a8ff;
    --syntax-title: #d2a8ff;
    --syntax-attr: #79c0ff;
    --syntax-variable: #ffa657;
    --syntax-regexp: #a5d6ff;
    --syntax-tag: #7ee787;
    --syntax-name: #7ee787;
    --syntax-selector: #d2a8ff;
    --syntax-meta: #8b949e;
    --syntax-deletion-text: #ffa198;
    --syntax-deletion-bg: rgba(248, 81, 73, 0.15);
    --syntax-addition-text: #7ee787;
    --syntax-addition-bg: rgba(63, 185, 80, 0.15);
  }
}

/* ============================================================================
 * CODE BLOCK CONTAINER
 * ============================================================================ */
.comment-content pre {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border: var(--border-1) solid var(--border-color);
  border-radius: var(--radius-2);
  padding: var(--space-2) var(--space-3);
  margin: var(--space-2) 0;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--text-0);
  line-height: var(--leading-3);
}

.comment-content pre code {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

/* Inline code */
.comment-content code {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  border-radius: var(--radius-1);
  padding: 0.15em 0.35em;
  font-family: var(--font-mono);
  font-size: 0.9em;
}

/* ============================================================================
 * SYNTAX HIGHLIGHTING RULES (token-based, theme-agnostic)
 * ============================================================================ */
.comment-content .hljs-comment,
.comment-content .hljs-quote {
  color: var(--syntax-comment);
  font-style: italic;
}

.comment-content .hljs-keyword,
.comment-content .hljs-selector-tag,
.comment-content .hljs-type {
  color: var(--syntax-keyword);
}

.comment-content .hljs-string {
  color: var(--syntax-string);
}

.comment-content .hljs-number,
.comment-content .hljs-literal {
  color: var(--syntax-number);
}

.comment-content .hljs-built_in,
.comment-content .hljs-builtin-name {
  color: var(--syntax-builtin);
}

.comment-content .hljs-title,
.comment-content .hljs-title.function_ {
  color: var(--syntax-title);
}

.comment-content .hljs-attr,
.comment-content .hljs-attribute {
  color: var(--syntax-attr);
}

.comment-content .hljs-variable,
.comment-content .hljs-template-variable {
  color: var(--syntax-variable);
}

.comment-content .hljs-params {
  color: var(--color-code-text);
}

.comment-content .hljs-regexp {
  color: var(--syntax-regexp);
}

.comment-content .hljs-tag {
  color: var(--syntax-tag);
}

.comment-content .hljs-name {
  color: var(--syntax-name);
}

.comment-content .hljs-selector-class,
.comment-content .hljs-selector-id {
  color: var(--syntax-selector);
}

.comment-content .hljs-selector-attr,
.comment-content .hljs-selector-pseudo {
  color: var(--syntax-attr);
}

.comment-content .hljs-symbol,
.comment-content .hljs-bullet {
  color: var(--syntax-number);
}

.comment-content .hljs-meta {
  color: var(--syntax-meta);
}

.comment-content .hljs-deletion {
  color: var(--syntax-deletion-text);
  background: var(--syntax-deletion-bg);
}

.comment-content .hljs-addition {
  color: var(--syntax-addition-text);
  background: var(--syntax-addition-bg);
}

.comment-content .hljs-emphasis {
  font-style: italic;
}

.comment-content .hljs-strong {
  font-weight: var(--weight-7);
}