[data-syntax-theme="yevi-org-light"] {
  --syntax-background: light-dark(var(--background-color-1), #002b36);
  --syntax-foreground: light-dark(var(--primary-text-color), #93a1a1);
  --syntax-comment: light-dark(var(--secondary-text-color), #586e75);
  --syntax-keyword: light-dark(var(--highlight-color-4), #b8c927);
  --syntax-operator: light-dark(var(--highlight-color-4), #b8c927);
  --syntax-string: light-dark(var(--highlight-color-4-darker), #58c7bd);
  --syntax-constant: light-dark(var(--highlight-color-2), #e26aa5);
  --syntax-function: light-dark(var(--highlight-color-3), #5eb7e5);
  --syntax-type: light-dark(var(--highlight-color-1), #d9b72f);
  --syntax-variable: light-dark(#657b83, #93a1a1);
  --syntax-property: light-dark(var(--highlight-color-3), #5eb7e5);
  --syntax-tag: light-dark(var(--highlight-color-3), #5eb7e5);
  --syntax-selector: light-dark(var(--highlight-color-3), #5eb7e5);
  --syntax-inserted: light-dark(var(--highlight-color-3-darker), #58c7bd);
  --syntax-deleted: light-dark(var(--highlight-color-4), #b8c927);

  color-scheme: light dark;
}

[data-syntax-theme="yevi-org-light"] 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); }