:root {
  --light-yellow: #e5c07b;
  --dark-yellow: #d19a66;
  --blue: #61afef;
  --cyan: #56b6c2;
  --light-red: #e06c75;
  --dark-red: #be5046;
  --comment-gray: #5c6370;
  --magenta: #c678dd;
  --green: #98c379;
}

pre {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding: 10px 5px;
}

code {
  color: var(--cyan);
}

/* Generic Tree-sitter scopes (class can be split or dotted). */
code .keyword,
code [class~="keyword"],
code [class*="keyword."],
code .conditional,
code .repeat,
code .exception,
code .type,
code [class~="type"],
code [class*="type."] {
  color: var(--light-yellow);
}

code .string {
  color: var(--dark-yellow);
}

code [class~="string"],
code [class*="string."],
code [class~="character"],
code [class*="character."] {
  color: var(--dark-yellow);
}

code .numeric.constant {
  color: var(--magenta);
}

code .number,
code [class~="number"],
code [class*="number."],
code .float,
code .boolean,
code .constant,
code [class~="constant"],
code [class*="constant."] {
  color: var(--magenta);
}

code .function {
  color: var(--blue);
}

code [class~="function"],
code [class*="function."],
code .method,
code [class~="method"],
code [class*="method."] {
  color: var(--blue);
}

code .comment,
code [class~="comment"],
code [class*="comment."],
code .documentation,
code .line_comment,
code .block_comment {
  color: var(--comment-gray);
  font-style: italic;
}

code .operator,
code [class~="operator"],
code [class*="operator."],
code .punctuation,
code [class~="punctuation"],
code [class*="punctuation."] {
  color: var(--cyan);
}

code .variable,
code [class~="variable"],
code [class*="variable."],
code .property,
code [class~="property"],
code [class*="property."] {
  color: var(--light-red);
}

code .tag,
code [class~="tag"],
code [class*="tag."],
code .attribute,
code [class~="attribute"],
code [class*="attribute."] {
  color: var(--green);
}