/**
 * Syntax highlighting token colours.
 *
 * Every colour is a --cms-highlight-* custom property (keyword, string,
 * number, title, variable, comment, template) that a theme sets on
 * [data-cms-highlight] or any ancestor, :root included. This file only reads
 * them, with a fallback, so a theme's value always wins however it is
 * selected. The fallbacks are for a light code background (each at least
 * 4.5:1 on #f6f4f0 and on white); a theme with a dark code background, or a
 * dark mode, sets its own. Nothing here touches the block's background,
 * padding or font: those are the theme's.
 */

[data-cms-highlight] .hljs-comment,
[data-cms-highlight] .hljs-quote {
    color: var(--cms-highlight-comment, #5f5a53);
    font-style: italic;
}

[data-cms-highlight] .hljs-keyword,
[data-cms-highlight] .hljs-selector-tag,
[data-cms-highlight] .hljs-built_in,
[data-cms-highlight] .hljs-doctag,
[data-cms-highlight] .hljs-meta .hljs-keyword {
    color: var(--cms-highlight-keyword, #a8570f);
}

[data-cms-highlight] .hljs-string,
[data-cms-highlight] .hljs-regexp,
[data-cms-highlight] .hljs-addition,
[data-cms-highlight] .hljs-meta .hljs-string {
    color: var(--cms-highlight-string, #116329);
}

[data-cms-highlight] .hljs-number,
[data-cms-highlight] .hljs-literal,
[data-cms-highlight] .hljs-symbol,
[data-cms-highlight] .hljs-bullet,
[data-cms-highlight] .hljs-attr,
[data-cms-highlight] .hljs-selector-attr,
[data-cms-highlight] .hljs-selector-pseudo,
[data-cms-highlight] .hljs-property {
    color: var(--cms-highlight-number, #0550ae);
}

[data-cms-highlight] .hljs-title,
[data-cms-highlight] .hljs-title.function_,
[data-cms-highlight] .hljs-title.class_,
[data-cms-highlight] .hljs-section,
[data-cms-highlight] .hljs-name,
[data-cms-highlight] .hljs-selector-id,
[data-cms-highlight] .hljs-selector-class {
    color: var(--cms-highlight-title, #6639ba);
}

[data-cms-highlight] .hljs-variable,
[data-cms-highlight] .hljs-template-variable,
[data-cms-highlight] .hljs-attribute,
[data-cms-highlight] .hljs-params,
[data-cms-highlight] .hljs-type,
[data-cms-highlight] .hljs-meta,
[data-cms-highlight] .hljs-deletion {
    color: var(--cms-highlight-variable, #953800);
}

[data-cms-highlight] .hljs-template-tag {
    color: var(--cms-highlight-template, #7a3f0a);
    font-weight: 600;
}

[data-cms-highlight] .hljs-emphasis {
    font-style: italic;
}

[data-cms-highlight] .hljs-strong {
    font-weight: 700;
}

[data-cms-highlight] .hljs-link {
    text-decoration: underline;
}