/* highlight.js theme, built from the design tokens rather than vendored.
 *
 * A stock hljs theme hard-codes one palette, which would mean a second source of
 * colour truth and a light/dark switch that highlight.js knows nothing about.
 * Mapping its class names onto our own tokens keeps UX-6 intact -- one place
 * defines the dark values -- and keeps the syntax palette inside the contrast
 * check of UX-8.
 */

.hljs {
  color: var(--text);
  background: transparent;
}

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

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-meta .hljs-keyword {
  color: var(--syn-keyword);
}

.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-attribute,
.hljs-meta .hljs-string {
  color: var(--syn-string);
}

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-selector-attr,
.hljs-selector-pseudo {
  color: var(--syn-number);
}

.hljs-title,
.hljs-title.function_,
.hljs-built_in {
  color: var(--syn-function);
}

.hljs-type,
.hljs-class .hljs-title,
.hljs-title.class_,
.hljs-selector-class,
.hljs-params {
  color: var(--syn-type);
}

.hljs-variable,
.hljs-template-variable,
.hljs-attr,
.hljs-property,
.hljs-selector-id,
.hljs-tag {
  color: var(--syn-variable);
}

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

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

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

.hljs-meta {
  color: var(--text-muted);
}