:root {
  --hl-fg: var(--fg);
  --hl-comment: var(--muted);
  --hl-keyword: var(--accent);
  --hl-string: var(--flex-green);
  --hl-number: var(--flex-cyan);
  --hl-function: var(--flex-blue);
  --hl-class: var(--flex-purple);
  --hl-variable: var(--fg);
  --hl-operator: var(--flex-magenta);
  --hl-punctuation: var(--muted);
}

.hljs {
  background: var(--code-bg);
  color: var(--hl-fg);
}

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

.hljs-keyword,
.hljs-selector-tag,
.hljs-subst,
.hljs-built_in,
.hljs-builtin-name {
  color: var(--hl-keyword);
  font-weight: 700;
}

.hljs-number,
.hljs-literal,
.hljs-variable,
.hljs-template-variable,
.hljs-tag .hljs-attr {
  color: var(--hl-number);
}

.hljs-string,
.hljs-doctag,
.hljs-regexp,
.hljs-addition {
  color: var(--hl-string);
}

.hljs-title,
.hljs-section,
.hljs-selector-id,
.hljs-name {
  color: var(--hl-function);
  font-weight: 700;
}

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

.hljs-tag,
.hljs-attribute {
  color: var(--hl-variable);
  font-weight: 700;
}

.hljs-link {
  color: var(--hl-function);
}

.hljs-symbol,
.hljs-bullet {
  color: var(--hl-keyword);
}

.hljs-meta {
  color: var(--hl-comment);
  font-weight: 700;
}

.hljs-deletion {
  background: rgba(175, 48, 41, 0.15);
}

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

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

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