/* Reference: GitHub Primer (MIT) — https://github.com/primer/github-vscode-theme/blob/main/src/classic/colors.json */
[data-syntax-theme="github"] {
  --syntax-background: light-dark(#ffffff, #0d1117);
  --syntax-foreground: light-dark(#24292f, #c9d1d9);
  --syntax-comment: light-dark(#6e7781, #8b949e);
  --syntax-keyword: light-dark(#cf222e, #ff7b72);
  --syntax-operator: light-dark(#24292f, #c9d1d9);
  --syntax-string: light-dark(#0a3069, #a5d6ff);
  --syntax-constant: light-dark(#0550ae, #79c0ff);
  --syntax-function: light-dark(#8250df, #d2a8ff);
  --syntax-type: light-dark(#8250df, #d2a8ff);
  --syntax-variable: light-dark(#953800, #ffa657);
  --syntax-property: light-dark(#0550ae, #79c0ff);
  --syntax-tag: light-dark(#116329, #7ee787);
  --syntax-selector: light-dark(#8250df, #d2a8ff);
  --syntax-inserted: light-dark(#116329, #7ee787);
  --syntax-deleted: light-dark(#cf222e, #ff7b72);

  color-scheme: light dark;
}

[data-syntax-theme="github"] pre:has(code) {
  background-color: var(--syntax-background);
  color: var(--syntax-foreground);
}

::highlight(comment),
::highlight(quote) {
  color: var(--syntax-comment);
}

::highlight(keyword),
::highlight(storage),
::highlight(at-rule),
::highlight(doctype),
::highlight(important),
::highlight(section) {
  color: var(--syntax-keyword);
}

::highlight(operator),
::highlight(punctuation) {
  color: var(--syntax-operator);
}

::highlight(string),
::highlight(regexp),
::highlight(attribute-value),
::highlight(link),
::highlight(raw) {
  color: var(--syntax-string);
}

::highlight(numeric),
::highlight(boolean),
::highlight(constant),
::highlight(symbol),
::highlight(character-entity),
::highlight(anchor),
::highlight(entity) {
  color: var(--syntax-constant);
}

::highlight(function),
::highlight(decorator),
::highlight(animation) {
  color: var(--syntax-function);
}

::highlight(type),
::highlight(support) {
  color: var(--syntax-type);
}

::highlight(variable),
::highlight(interpolation) {
  color: var(--syntax-variable);
}

::highlight(property),
::highlight(key),
::highlight(attribute-name) {
  color: var(--syntax-property);
}

::highlight(tag) {
  color: var(--syntax-tag);
}

::highlight(selector) {
  color: var(--syntax-selector);
}

::highlight(inserted) {
  color: var(--syntax-inserted);
}

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