/* ================================================================
   Prism.js — DataHints DS theme
   Maps Prism token classes (.token.*) to DS color tokens defined
   in codeblock.css. Pair this with Prism's syntax engine inside
   `.cb-pre <code class="language-*">` and the result matches
   the DS hand-tokenized preview.
   ================================================================ */

/* Prism wraps tokenized text in <span class="token …">. Inside
 * .cb-pre, those spans inherit codeblock typography; here we just
 * recolour by token class. */

.cb-pre code[class*="language-"] .token.keyword,
.cb-pre code[class*="language-"] .token.atrule,
.cb-pre code[class*="language-"] .token.important {
	color: var(--tok-kw);
}

.cb-pre code[class*="language-"] .token.function,
.cb-pre code[class*="language-"] .token.class-name,
.cb-pre code[class*="language-"] .token.method {
	color: var(--tok-fn);
}

.cb-pre code[class*="language-"] .token.string,
.cb-pre code[class*="language-"] .token.template-string,
.cb-pre code[class*="language-"] .token.regex,
.cb-pre code[class*="language-"] .token.attr-value,
.cb-pre code[class*="language-"] .token.url,
.cb-pre code[class*="language-"] .token.char {
	color: var(--tok-str);
}

.cb-pre code[class*="language-"] .token.number,
.cb-pre code[class*="language-"] .token.boolean,
.cb-pre code[class*="language-"] .token.constant,
.cb-pre code[class*="language-"] .token.symbol {
	color: var(--tok-num);
}

.cb-pre code[class*="language-"] .token.comment,
.cb-pre code[class*="language-"] .token.prolog,
.cb-pre code[class*="language-"] .token.doctype,
.cb-pre code[class*="language-"] .token.cdata {
	color: var(--tok-cmt);
	font-style: italic;
}

.cb-pre code[class*="language-"] .token.builtin,
.cb-pre code[class*="language-"] .token.tag,
.cb-pre code[class*="language-"] .token.attr-name,
.cb-pre code[class*="language-"] .token.namespace {
	color: var(--tok-type);
}

.cb-pre code[class*="language-"] .token.operator,
.cb-pre code[class*="language-"] .token.entity {
	color: var(--tok-op);
}

.cb-pre code[class*="language-"] .token.variable,
.cb-pre code[class*="language-"] .token.parameter,
.cb-pre code[class*="language-"] .token.property {
	color: var(--tok-var);
}

.cb-pre code[class*="language-"] .token.punctuation,
.cb-pre code[class*="language-"] .token.delimiter {
	color: var(--tok-punct);
}

/* Bold/italic flags some grammars set */
.cb-pre code[class*="language-"] .token.bold      { font-weight: 600; }
.cb-pre code[class*="language-"] .token.italic    { font-style: italic; }
.cb-pre code[class*="language-"] .token.entity    { cursor: help; }

/* The base `.cb-pre code` already has the right font/whitespace; ensure
 * the language class doesn't add a Prism default background. */
.cb-pre code[class*="language-"] {
	background: transparent;
	text-shadow: none;
}

/* DS ships .cb-lang-dot colours for sql/js/py/ts/bash. Extend for languages
 * we may render via Prism autoloader. Colours mirror DS token palette. */
.cb-lang-dot.json       { background: #ffc852; } /* AB-400 — same as numbers */
.cb-lang-dot.yaml,
.cb-lang-dot.yml        { background: #a0a3ff; } /* EP-300 — same as keywords */
.cb-lang-dot.markdown,
.cb-lang-dot.md         { background: #f5f5f7; } /* fg — neutral */
.cb-lang-dot.html       { background: #ff9b6e; } /* coral */
.cb-lang-dot.css        { background: #06bcc1; } /* IN-400 */
.cb-lang-dot.php        { background: #b3aaff; } /* VT-300 */
.cb-lang-dot.go         { background: #06bcc1; }
.cb-lang-dot.rust       { background: #ff9b6e; }
.cb-lang-dot.java       { background: #ffc852; }

/* Code blocks need breathing room from neighbouring paragraphs in prose.
 * DS `.dh-codeblock` ships with no own margin. */
.dh-prose .dh-codeblock { margin-block: var(--sp-6); }