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

pre {
  border-top: 1px dotted #6b6b6b;
  border-bottom: 1px dotted #6b6b6b;
  padding: 10px 5px;
}

/* Zine tags each token with every matching tree-sitter capture; the last class is the most specific one. */
pre code [class^="punctuation"] { color: #888; }
pre code .operator { color: var(--cyan); }
pre code [class^="keyword"] { color: var(--magenta); }
pre code .string { color: var(--green); }
pre code .embedded { color: var(--light-red); }
pre code .number,
pre code [class$="boolean"],
pre code .constant_builtin { color: var(--dark-yellow); }
pre code [class$=" type"],
pre code [class$="type_builtin"] { color: var(--light-yellow); }
pre code .property { color: var(--light-red); }
pre code [class$="function"],
pre code [class$="function_call"],
pre code .function_method,
pre code [class$="function_builtin"] { color: var(--blue); }
pre code .comment { color: var(--comment-gray); font-style: italic; }