/* Light theme */
.light {
  --comment: #90a4ae;
  --keyword: #7c4dff;
  --variable: #e91e63;
  --string: #388e3c;
  --number: #f4511e;
  --function: #039be5;
  --class: #ffb300;
  --constant: #ffca28;
  --tag: #7c4dff;
  --attribute: #7c4dff;
  --operator: #616161;
  --builtin: #039be5;
  --punctuation: #616161;
}

/* Dark theme */
.dark {
  --comment: #546e7a;
  --keyword: #c792ea;
  --variable: #f07178;
  --string: #c3e88d;
  --punctuation: #89ddff;
  --class: #ffcb6b;
  --constant: #ffe082;
  --tag: #f07178;
  --attribute: #c792ea;
  --operator: #89ddff;
  --builtin: #89ddff;
}

::highlight(comment),
::highlight(prolog),
::highlight(doctype),
::highlight(cdata) {
  color: var(--comment);
}

::highlight(function) {
  color: var(--function);
}

::highlight(punctuation) {
  color: var(--punctuation);
  opacity: 0.7;
}

::highlight(namespace) {
  color: var(--builtin);
  opacity: 0.7;
}

::highlight(property),
::highlight(tag),
::highlight(boolean),
::highlight(number),
::highlight(constant),
::highlight(symbol) {
  color: var(--constant);
}

::highlight(selector),
::highlight(attr-name),
::highlight(string),
::highlight(char),
::highlight(builtin),
::highlight(inserted) {
  color: var(--string);
}

::highlight(operator),
::highlight(entity),
::highlight(url),
::highlight(variable) {
  color: var(--operator);
}

::highlight(atrule),
::highlight(attr-value),
::highlight(keyword) {
  color: var(--keyword);
}

::highlight(regex),
::highlight(important) {
  color: var(--color-regex);
}

::highlight(important),
::highlight(bold) {
  font-weight: bold;
}

::highlight(italic) {
  font-style: italic;
}

::highlight(deleted) {
  color: var(--color-deleted);
}

/* CSS language overwrites */
::highlight(css-important) {
  color: var(--color-css-important);
}