/* ============================================================
   Syntax highlighting — muted ink palette
   Token colours are desaturated to sit quietly on the paper theme;
   the dark (ink slate) variant lifts the same hues for contrast.
   ============================================================ */

:root {
  --hl-comment: #6a6355;
  --hl-keyword: #8b3a2e;
  --hl-string: #4f6146;
  --hl-number: #4a5d78;
  --hl-title: #6b4a7a;
  --hl-attr: #3f6156;
  --hl-type: #8a5a2a;
  --hl-meta: #665f51;
  --hl-deletion-bg: rgba(139, 58, 46, 0.10);
  --hl-addition-bg: rgba(79, 97, 70, 0.12);
}

html[data-theme="dark"] {
  --hl-comment: #9c9583;
  --hl-keyword: #cf8578;
  --hl-string: #a3b58e;
  --hl-number: #91a8c4;
  --hl-title: #b295c2;
  --hl-attr: #8fb5a5;
  --hl-type: #c9a06a;
  --hl-meta: #a8a191;
  --hl-deletion-bg: rgba(207, 133, 120, 0.12);
  --hl-addition-bg: rgba(163, 181, 142, 0.12);
}

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

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

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

.hljs-string,
.hljs-regexp,
.hljs-char.escape_,
.hljs-template-tag,
.hljs-selector-attr,
.hljs-selector-pseudo,
.hljs-meta .hljs-string { color: var(--hl-string); }

.hljs-number,
.hljs-symbol,
.hljs-bullet,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-id,
.hljs-selector-class { color: var(--hl-number); }

.hljs-title,
.hljs-title.class_,
.hljs-title.function_,
.hljs-section,
.hljs-name { color: var(--hl-title); font-weight: 600; }

.hljs-attr,
.hljs-attribute,
.hljs-property,
.hljs-params,
.hljs-tag { color: var(--hl-attr); }

.hljs-built_in,
.hljs-type,
.hljs-class,
.hljs-title.class_.inherited__ { color: var(--hl-type); }

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

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

.hljs-deletion { color: var(--hl-keyword); background: var(--hl-deletion-bg); }
.hljs-addition { color: var(--hl-string); background: var(--hl-addition-bg); }

.hljs-emphasis { font-style: italic; }
.hljs-strong { font-weight: 700; }