/* ══════════════════════════════════════════════════════════════════════════
   highlight.js theme — written against the repo's own tokens rather than
   imported from upstream, so code blocks read as part of the Apple-style
   violet-on-graphite palette instead of a foreign colour scheme.

   Only the token classes highlight.js actually emits for the vendored
   languages (bash, python, javascript, typescript, json, sql, diff, ini,
   xml) are styled; anything else falls back to --text.
   ══════════════════════════════════════════════════════════════════════ */

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

/* — the quiet half: punctuation, comments, structure — */
.hljs-comment,
.hljs-quote {
  color: var(--text-3);
  font-style: italic;
}

.hljs-punctuation,
.hljs-operator {
  color: var(--text-2);
}

/* — the accent half: what the eye should land on — */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-doctag,
.hljs-name,
.hljs-meta .hljs-keyword {
  color: var(--accent-text);
}

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

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

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-link,
.hljs-template-variable {
  color: var(--orange);
}

.hljs-variable,
.hljs-attr,
.hljs-property,
.hljs-params,
.hljs-built_in,
.hljs-class .hljs-title {
  color: var(--text);
}

.hljs-type,
.hljs-tag,
.hljs-subst {
  color: var(--purple);
}

.hljs-meta,
.hljs-meta .hljs-string {
  color: var(--text-2);
}

/* — diffs: the one place colour carries meaning, not just texture — */
.hljs-addition {
  color: var(--green);
  background: color-mix(in srgb, var(--green) 10%, transparent);
  display: inline-block;
  width: 100%;
}

.hljs-deletion {
  color: var(--red);
  background: color-mix(in srgb, var(--red) 10%, transparent);
  display: inline-block;
  width: 100%;
}

.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 600; }
.hljs-link { text-decoration: underline; }