/* ════════════════════════════════════════════════════
   code-highlight — syntax token colors for chat code blocks
   ════════════════════════════════════════════════════
   Colors the highlight.js token spans (.hljs-keyword, .hljs-string, …) that
   js/chat-core/code-highlight.js produces inside the `.code-block-wrapper`
   markdown.js emits.

   Theme note: the code-block surface (`.code-block-wrapper`) is a deliberately
   dark editor surface (#09090b) in BOTH the dark and light app themes — same
   as the reference screenshot, where the code panel stays dark on a light page.
   So the syntax palette is tuned once for a dark background and is intentionally
   theme-independent. The tokens are defined as named CSS variables (scoped to
   the wrapper) rather than inline hexes, so a future skin can re-point them in
   one place. */

.code-block-wrapper {
    /* Syntax palette — dark-surface tuned. One named token per role; the
       per-class rules below only reference these, never raw hex. */
    --code-syntax-base:    var(--text-primary, #ECECEC);
    --code-syntax-comment: #6a737d;
    --code-syntax-keyword: #ff7b72;  /* control flow, modifiers (using, var, if) */
    --code-syntax-string:  #7ee787;  /* string + char literals */
    --code-syntax-number:  #79c0ff;  /* numeric + boolean literals */
    --code-syntax-func:    #d2a8ff;  /* function / method names */
    --code-syntax-type:    #ffa657;  /* class / type / built-in names */
    --code-syntax-attr:    #79c0ff;  /* attributes, properties, params */
    --code-syntax-meta:    #8b949e;  /* preprocessor, annotations, doctags */
    --code-syntax-tag:     #7ee787;  /* markup tag names */
    --code-syntax-symbol:  #ffa657;  /* symbols, links, bullets */
    --code-syntax-deleted: #ffa198;
    --code-syntax-added:   #7ee787;
}

/* The token spans live inside `pre > code`. Base text falls back to the
   wrapper's base token; highlight.js wraps the whole block in `.hljs`. */
.code-block-wrapper pre code.hljs,
.code-block-wrapper pre code .hljs {
    color: var(--code-syntax-base);
    background: transparent;
}

/* Comments + quotes */
.code-block-wrapper .hljs-comment,
.code-block-wrapper .hljs-quote {
    color: var(--code-syntax-comment);
    font-style: italic;
}

/* Keywords + control + this/self/super */
.code-block-wrapper .hljs-keyword,
.code-block-wrapper .hljs-selector-tag,
.code-block-wrapper .hljs-literal,
.code-block-wrapper .hljs-doctag,
.code-block-wrapper .hljs-name {
    color: var(--code-syntax-keyword);
}

/* Strings */
.code-block-wrapper .hljs-string,
.code-block-wrapper .hljs-regexp,
.code-block-wrapper .hljs-char.escape_,
.code-block-wrapper .hljs-template-tag {
    color: var(--code-syntax-string);
}

/* Numbers + booleans */
.code-block-wrapper .hljs-number,
.code-block-wrapper .hljs-bullet {
    color: var(--code-syntax-number);
}

/* Function + method names */
.code-block-wrapper .hljs-title.function_,
.code-block-wrapper .hljs-title.function_.invoke__,
.code-block-wrapper .hljs-function .hljs-title {
    color: var(--code-syntax-func);
}

/* Types, classes, built-ins */
.code-block-wrapper .hljs-title,
.code-block-wrapper .hljs-title.class_,
.code-block-wrapper .hljs-class .hljs-title,
.code-block-wrapper .hljs-type,
.code-block-wrapper .hljs-built_in,
.code-block-wrapper .hljs-builtin-name {
    color: var(--code-syntax-type);
}

/* Attributes, params, variables, properties */
.code-block-wrapper .hljs-attr,
.code-block-wrapper .hljs-attribute,
.code-block-wrapper .hljs-variable,
.code-block-wrapper .hljs-template-variable,
.code-block-wrapper .hljs-params,
.code-block-wrapper .hljs-property,
.code-block-wrapper .hljs-selector-attr,
.code-block-wrapper .hljs-selector-class,
.code-block-wrapper .hljs-selector-id,
.code-block-wrapper .hljs-selector-pseudo {
    color: var(--code-syntax-attr);
}

/* Meta — preprocessor, annotations, decorators */
.code-block-wrapper .hljs-meta,
.code-block-wrapper .hljs-meta .hljs-keyword,
.code-block-wrapper .hljs-comment .hljs-doctag {
    color: var(--code-syntax-meta);
}

/* Markup tags + sections */
.code-block-wrapper .hljs-tag,
.code-block-wrapper .hljs-section {
    color: var(--code-syntax-tag);
}

/* Symbols, links */
.code-block-wrapper .hljs-symbol,
.code-block-wrapper .hljs-link,
.code-block-wrapper .hljs-operator {
    color: var(--code-syntax-symbol);
}

/* Diff add/delete */
.code-block-wrapper .hljs-addition {
    color: var(--code-syntax-added);
}
.code-block-wrapper .hljs-deletion {
    color: var(--code-syntax-deleted);
}

/* Emphasis carried by some grammars (markdown) */
.code-block-wrapper .hljs-emphasis { font-style: italic; }
.code-block-wrapper .hljs-strong { font-weight: 600; }