[data-syntax-theme="flexoki"] {
  --syntax-background: var(--bg);
  --syntax-foreground: var(--tx);
  --syntax-comment: var(--tx-3);
  --syntax-keyword: var(--gr);
  --syntax-operator: var(--tx-2);
  --syntax-string: var(--cy);
  --syntax-constant: var(--ye);
  --syntax-number: var(--pu);
  --syntax-function: var(--or);
  --syntax-type: var(--ma);
  --syntax-variable: var(--bl);
  --syntax-property: var(--bl);
  --syntax-tag: var(--bl);
  --syntax-selector: var(--cy);
  --syntax-inserted: var(--gr);
  --syntax-deleted: var(--re);
  color-scheme: light dark;
  --bg: light-dark(#fffcf0, #100f0f);
  --tx-3: light-dark(#b7b5ac, #575653);
  --tx-2: light-dark(#6f6e69, #878580);
  --tx: light-dark(#100f0f, #cecdc3);
  --re: light-dark(#af3029, #d14d41);
  --or: light-dark(#bc5215, #da702c);
  --ye: light-dark(#ad8301, #d0a215);
  --gr: light-dark(#66800b, #879a39);
  --cy: light-dark(#24837b, #3aa99f);
  --bl: light-dark(#205ea6, #4385be);
  --pu: light-dark(#5e409d, #8b7ec8);
  --ma: light-dark(#a02f6f, #ce5d97);
}
[data-syntax-theme="flexoki"] pre:has(code) {
  background-color: var(--syntax-background);
  color: var(--syntax-primary-text);
}
::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(boolean),
::highlight(constant),
::highlight(symbol),
::highlight(character-entity),
::highlight(anchor),
::highlight(entity) {
  color: var(--syntax-constant);
}
::highlight(numeric) {
  color: var(--syntax-number);
}
::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);
}