:root {
  --hl-keyword: #cf222e;
  --hl-string: #0a3069;
  --hl-number: #0550ae;
  --hl-comment: #6e7781;
  --hl-function: #8250df;
  --hl-type: #953800;
  --hl-property: #0550ae;
  --hl-punctuation: #57606a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hl-keyword: #ff7b72;
    --hl-string: #a5d6ff;
    --hl-number: #79c0ff;
    --hl-comment: #8b949e;
    --hl-function: #d2a8ff;
    --hl-type: #ffa657;
    --hl-property: #79c0ff;
    --hl-punctuation: #8b949e;
  }
}

.smalto-keyword,
.smalto-tag,
.smalto-builtin {
  color: var(--hl-keyword);
}
.smalto-string,
.smalto-regex {
  color: var(--hl-string);
}
.smalto-number,
.smalto-constant {
  color: var(--hl-number);
}
.smalto-comment {
  color: var(--hl-comment);
  font-style: italic;
}
.smalto-function,
.smalto-selector {
  color: var(--hl-function);
}
.smalto-type,
.smalto-module,
.smalto-attribute {
  color: var(--hl-type);
}
.smalto-property,
.smalto-variable {
  color: var(--hl-property);
}
.smalto-operator,
.smalto-punctuation {
  color: var(--hl-punctuation);
}