/*
 * Syntax highlighting for code fences. Single source of truth for
 * `.tok-*` token coloring — rendered by Lezer's headless highlighter
 * on the server (app/lib/render-post.ts) and by CodeMirror's view in
 * the editor. Selector intentionally targets `pre.code-fence` only,
 * so it applies identically wherever a published code fence appears
 * (post body, comments, replies, drafts page snippets, etc).
 *
 * Palette: VSCode Dark+ default theme. Hex values are VSCode's
 * canonical token colors so a snippet on a post reads exactly like
 * the same code in a VSCode editor window.
 */

/* Surface — VSCode editor background + foreground. Consumers
   (.md-preview, .post-body, .cmt-body) own padding/radius/font-size
   so each surface can size code fences for its density. */
pre.code-fence {
  background: #1e1e1e;
  color: #d4d4d4;
}

/* Comments — VSCode green, italic. */
pre.code-fence .tok-comment,
pre.code-fence .tok-lineComment,
pre.code-fence .tok-blockComment   { color: #6a9955; font-style: italic; }

/* Declaration keywords (let/const/function/class/type/interface/import/export). */
pre.code-fence .tok-keyword,
pre.code-fence .tok-moduleKeyword,
pre.code-fence .tok-modifier,
pre.code-fence .tok-self           { color: #569cd6; }

/* Control-flow keywords (if/else/for/while/return/switch/await/async). */
pre.code-fence .tok-controlKeyword { color: #c586c0; }

/* Operator keywords (typeof/instanceof/in/of/new/delete/void). */
pre.code-fence .tok-operatorKeyword { color: #569cd6; }

/* Strings + character + html attribute values — VSCode peach. */
pre.code-fence .tok-string,
pre.code-fence .tok-string2,
pre.code-fence .tok-character,
pre.code-fence .tok-attributeValue { color: #ce9178; }

/* Numbers / booleans / null / atoms — VSCode sage. */
pre.code-fence .tok-number,
pre.code-fence .tok-integer,
pre.code-fence .tok-float,
pre.code-fence .tok-bool,
pre.code-fence .tok-null,
pre.code-fence .tok-atom           { color: #b5cea8; }

/* Type / class / namespace names — VSCode teal. */
pre.code-fence .tok-typeName,
pre.code-fence .tok-className,
pre.code-fence .tok-namespace      { color: #4ec9b0; }

/* HTML/JSX tag names — VSCode blue (matches keyword family). */
pre.code-fence .tok-tagName        { color: #569cd6; }

/* Variables, properties, attribute names — VSCode light-blue. */
pre.code-fence .tok-variableName,
pre.code-fence .tok-propertyName,
pre.code-fence .tok-attributeName,
pre.code-fence .tok-definition     { color: #9cdcfe; }

/* Function / method / label names — VSCode yellow. */
pre.code-fence .tok-function,
pre.code-fence .tok-functionDefinition,
pre.code-fence .tok-macroName,
pre.code-fence .tok-labelName      { color: #dcdcaa; }

/* Punctuation / brackets / operators — foreground gray. */
pre.code-fence .tok-meta,
pre.code-fence .tok-processingInstruction,
pre.code-fence .tok-punctuation,
pre.code-fence .tok-bracket,
pre.code-fence .tok-paren,
pre.code-fence .tok-brace,
pre.code-fence .tok-angleBracket,
pre.code-fence .tok-squareBracket,
pre.code-fence .tok-separator,
pre.code-fence .tok-operator       { color: #d4d4d4; }

/* Regex literal — VSCode salmon-red. */
pre.code-fence .tok-regexp         { color: #d16969; }

/* Escape sequence — VSCode tan. */
pre.code-fence .tok-escape         { color: #d7ba7d; }

/* Markdown link / url — VSCode cornflower, underlined. */
pre.code-fence .tok-link,
pre.code-fence .tok-url            { color: #3794ff; text-decoration: underline; }

/* Headings + emphasis (markdown / asciidoc / rst inside fences). */
pre.code-fence .tok-heading        { color: #569cd6; font-weight: 700; }
pre.code-fence .tok-emphasis       { font-style: italic; }
pre.code-fence .tok-strong         { font-weight: 700; }