:root {
  --text-color: #4c4f69;
  --background-color: #e6e9ef;

  --token-color-keyword: #8839ef;
  --token-color-builtin: #d20f39;
  --token-color-class-name: #df8e1d;
  --token-color-function: #1e66f5;
  --token-color-number: #fe640b;
  --token-color-string: #40a02b;
  --token-color-symbol: var(--token-color-class-name);
  --token-color-regex: #ea76cb;
  --token-color-url: var(--token-color-string);
  --token-color-operator: #04a5e5;
  --token-color-variable: #4c4f69;
  --token-color-constant: var(--token-color-number);
  --token-color-property: var(--token-color-function);
  --token-color-punctuation: #7c7f93;
  --token-color-important: var(--token-color-keyword);
  --token-color-comment: var(--token-color-punctuation);
  --token-color-tag: var(--token-color-function);
  --token-color-attr-name: var(--token-color-class-name);
  --token-color-attr-value: var(--token-color-string);
  --token-color-namespace: var(--token-color-class-name);
  --token-color-doctype: var(--token-color-keyword);
  --token-color-cdata: #179299;
  --token-color-entity: var(--token-color-builtin);
  --token-color-atrule: var(--token-color-keyword);
  --token-color-selector: var(--token-color-function);
  --token-color-deleted: var(--token-color-builtin);
  --token-color-inserted: var(--token-color-string);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color: #c6d0f5;
    --background-color: #292c3c;

    --token-color-keyword: #ca9ee6;
    --token-color-builtin: #e78284;
    --token-color-class-name: #e5c890;
    --token-color-function: #8caaee;
    --token-color-number: #ef9f76;
    --token-color-string: #a6d189;
    --token-color-symbol: var(--token-color-class-name);
    --token-color-regex: #f4b8e4;
    --token-color-url: var(--token-color-string);
    --token-color-operator: #99d1db;
    --token-color-variable: #c6d0f5;
    --token-color-constant: var(--token-color-number);
    --token-color-property: var(--token-color-function);
    --token-color-punctuation: #949cbb;
    --token-color-important: var(--token-color-keyword);
    --token-color-comment: var(--token-color-punctuation);
    --token-color-tag: var(--token-color-function);
    --token-color-attr-name: var(--token-color-class-name);
    --token-color-attr-value: var(--token-color-string);
    --token-color-namespace: var(--token-color-class-name);
    --token-color-doctype: var(--token-color-keyword);
    --token-color-cdata: #81c8be;
    --token-color-entity: var(--token-color-builtin);
    --token-color-atrule: var(--token-color-keyword);
    --token-color-selector: var(--token-color-function);
    --token-color-deleted: var(--token-color-builtin);
    --token-color-inserted: var(--token-color-string);
  }
}

:where(pre, code)[class*='language-'] {
  color: var(--text-color);
}

:where(:not(pre) > code, pre)[class*='language-'] {
  background: var(--background-color);
}

/* https://prismjs.com/tokens.html */

.token {
  &.keyword {
    color: var(--token-color-keyword);
  }

  &.builtin {
    color: var(--token-color-builtin);
  }

  &.class-name {
    color: var(--token-color-class-name);
  }

  &.function {
    color: var(--token-color-function);
  }

  &.boolean,
  &.number {
    color: var(--token-color-number);
  }

  &.string,
  &.char {
    color: var(--token-color-string);
  }

  &.symbol {
    color: var(--token-color-symbol);
  }

  &.regex {
    color: var(--token-color-regex);
  }

  &.url {
    color: var(--token-color-url);
  }

  &.operator {
    color: var(--token-color-operator);
  }

  &.variable {
    color: var(--token-color-variable);
  }

  &.constant {
    color: var(--token-color-constant);
  }

  &.property {
    color: var(--token-color-property);
  }

  &.punctuation {
    color: var(--token-color-punctuation);
  }

  &.important {
    color: var(--token-color-important);
  }

  &.comment {
    color: var(--token-color-comment);
  }

  &.tag {
    color: var(--token-color-tag);
  }

  &.attr-name {
    color: var(--token-color-attr-name);
  }

  &.attr-value {
    color: var(--token-color-attr-value);
  }

  &.namespace {
    color: var(--token-color-namespace);
  }

  &.prolog,
  &.doctype {
    color: var(--token-color-doctype);
  }

  &.cdata {
    color: var(--token-color-cdata);
  }

  &.entity {
    color: var(--token-color-entity);
  }

  &.atrule {
    color: var(--token-color-atrule);
  }

  &.selector {
    color: var(--token-color-selector);
  }

  /* Diff */

  &.deleted {
    color: var(--token-color-deleted);
  }

  &.inserted {
    color: var(--token-color-inserted);
  }

  /* Other */

  &.important,
  &.bold {
    font-weight: bold;
  }
  &.italic {
    font-style: italic;
  }
}