/**
 * Criteo — highlight.js token theme (compact, custom).
 *
 * Deliberately sets NO background on .hljs: the theme's own code-block surface
 * (.criteo-article :where(pre), a translucent grey) must show through in both
 * light and dark. We only colour the tokens, via CSS variables that flip under
 * :root[data-theme="dark"] (the site's dark-mode switch), so tokens stay legible
 * on the light-grey surface in light mode and the dark-grey surface in dark mode.
 */
:root {
	--hl-comment: #6a737d;
	--hl-keyword: #cf222e; /* keywords, selectors */
	--hl-string:  #0a7d20; /* strings, regexp, added lines */
	--hl-number:  #953800; /* numbers, literals — brand-orange lean */
	--hl-title:   #6639ba; /* function / class names, sections */
	--hl-builtin: #0550ae; /* built-ins, types, attributes */
	--hl-name:    #116329; /* tags, symbols, variables */
	--hl-meta:    #6a737d;
	--hl-deletion:#b62324;
}

:root[data-theme="dark"] {
	--hl-comment: #8b949e;
	--hl-keyword: #ff7b72;
	--hl-string:  #7ee787;
	--hl-number:  #ffa657; /* light orange — brand nod, reads on dark grey */
	--hl-title:   #d2a8ff;
	--hl-builtin: #79c0ff;
	--hl-name:    #7ee787;
	--hl-meta:    #8b949e;
	--hl-deletion:#ffa198;
}

/* Base: transparent so our pre background stays; text inherits article colour. */
.criteo-article .hljs,
.wp-block-code code.hljs {
	background: transparent;
	padding: 0;
	color: inherit;
}

.hljs-comment,
.hljs-quote {
	color: var( --hl-comment );
	font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-doctag,
.hljs-formula {
	color: var( --hl-keyword );
}

.hljs-string,
.hljs-regexp,
.hljs-addition {
	color: var( --hl-string );
}

.hljs-number,
.hljs-literal,
.hljs-bullet,
.hljs-link {
	color: var( --hl-number );
}

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-section,
.hljs-selector-id {
	color: var( --hl-title );
}

.hljs-built_in,
.hljs-type,
.hljs-class,
.hljs-attr,
.hljs-attribute,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
	color: var( --hl-builtin );
}

.hljs-name,
.hljs-tag,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-params {
	color: var( --hl-name );
}

.hljs-meta,
.hljs-meta .hljs-keyword {
	color: var( --hl-meta );
}

.hljs-deletion {
	color: var( --hl-deletion );
}

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

.hljs-strong {
	font-weight: 700;
}