/**
 * Accessible colour layer for PrismJS.
 *
 * @package TwentyTwentyFiveChild
 *
 * prism.css is a vendored download (PrismJS 1.29.0, default theme) and is left
 * untouched so the next upgrade is a straight file swap. This sheet sits on top
 * of it and restates every token colour.
 *
 * Six of the eight stock token colours fail WCAG AA against the code
 * background -- punctuation at 2.56:1 and regex at 2.05:1 are the worst -- so
 * the colours here are recomputed replacements rather than a dark-mode-only
 * patch. The values live in tokens.css as --agp-syntax-*, which already carries
 * a light and a dark set, so the mappings below need no scheme selector; they
 * follow the toggle on their own.
 *
 * Only the two genuinely structural differences stay scheme-scoped: the white
 * text-shadow and the pale backgrounds the stock theme paints, both of which
 * are light-theme devices that read as artefacts on a dark surface.
 *
 * These rules match prism.css's own specificity, so they depend on loading
 * after it. That is guaranteed by the stylesheet dependency declared in
 * functions.php, not by luck.
 */

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
	color: var(--agp-syntax-comment);
}

.token.punctuation {
	color: var(--agp-syntax-punctuation);
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
	color: var(--agp-syntax-value);
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
	color: var(--agp-syntax-string);
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
	color: var(--agp-syntax-operator);
}

.token.atrule,
.token.attr-value,
.token.keyword {
	color: var(--agp-syntax-keyword);
}

.token.function,
.token.class-name {
	color: var(--agp-syntax-function);
}

.token.regex,
.token.important,
.token.variable {
	color: var(--agp-syntax-regex);
}

/* -----------------------------------------------------------------------------
 * Dark scheme: structure, not colour
 * -------------------------------------------------------------------------- */

:root[data-theme="dark"] code[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"] {
	color: var(--agp-text);

	/* The stock theme paints a white text-shadow to lift glyphs off a pale
	   background. On a dark background that reads as a halo. */
	text-shadow: none;
}

:root[data-theme="dark"] :is(pre, code)[class*="language-"]::selection,
:root[data-theme="dark"] :is(pre, code)[class*="language-"] ::selection {
	background: color-mix(in srgb, currentColor 25%, transparent);
	text-shadow: none;
}

:root[data-theme="dark"] :not(pre) > code[class*="language-"],
:root[data-theme="dark"] pre[class*="language-"] {
	background: var(--agp-surface-raised);
}

/* The stock rule sets a half-opaque white behind operators, which shows as a
   bright block once the surface is dark. */
:root[data-theme="dark"] .token.operator,
:root[data-theme="dark"] .token.entity,
:root[data-theme="dark"] .token.url,
:root[data-theme="dark"] .language-css .token.string,
:root[data-theme="dark"] .style .token.string {
	background: none;
}

/* Copy-to-clipboard toolbar button. */
:root[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > a,
:root[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > button,
:root[data-theme="dark"] div.code-toolbar > .toolbar > .toolbar-item > span {
	color: var(--agp-text-muted);
	background: color-mix(in srgb, currentColor 12%, transparent);
	box-shadow: var(--agp-shadow-sm);
}