/* Base: all code blocks use these variables */
pre[data-language],
pre[data-language] code {
  background-color: var(--syntax-bg);
  color: var(--syntax-text);
}

pre[data-language] .token.comment,
pre[data-language] .token.prolog,
pre[data-language] .token.doctype,
pre[data-language] .token.cdata {
  color: var(--syntax-comment);
}

pre[data-language] .token.punctuation {
  color: var(--syntax-punctuation);
}

pre[data-language] .token.property,
pre[data-language] .token.tag,
pre[data-language] .token.boolean,
pre[data-language] .token.number,
pre[data-language] .token.constant,
pre[data-language] .token.symbol {
  color: var(--syntax-constant);
}

pre[data-language] .token.selector,
pre[data-language] .token.attr-name,
pre[data-language] .token.string,
pre[data-language] .token.char,
pre[data-language] .token.builtin {
  color: var(--syntax-string);
}

pre[data-language] .token.operator,
pre[data-language] .token.entity,
pre[data-language] .token.url {
  color: var(--syntax-operator);
}

pre[data-language] .token.atrule,
pre[data-language] .token.attr-value,
pre[data-language] .token.keyword {
  color: var(--syntax-keyword);
}

pre[data-language] .token.function,
pre[data-language] .token.class-name {
  color: var(--syntax-function);
}

pre[data-language] .token.regex,
pre[data-language] .token.important,
pre[data-language] .token.variable {
  color: var(--syntax-variable);
}

pre[data-language] .token.namespace {
  opacity: 0.7;
}

/* ─── Catppuccin Mocha ─── */
.syntax-theme-catppuccin-mocha {
  --syntax-bg: #1e1e2e;
  --syntax-text: #cdd6f4;
  --syntax-comment: #6c7086;
  --syntax-punctuation: #bac2de;
  --syntax-constant: #fab387;
  --syntax-string: #a6e3a1;
  --syntax-operator: #89dceb;
  --syntax-keyword: #cba6f7;
  --syntax-function: #89b4fa;
  --syntax-variable: #f38ba8;

  --lexxy-color-code-token-att: #cba6f7;
  --lexxy-color-code-token-comment: #6c7086;
  --lexxy-color-code-token-function: #89b4fa;
  --lexxy-color-code-token-operator: #89dceb;
  --lexxy-color-code-token-property: #fab387;
  --lexxy-color-code-token-punctuation: #bac2de;
  --lexxy-color-code-token-selector: #a6e3a1;
  --lexxy-color-code-token-variable: #f38ba8;

  & code {
    --lexxy-color-ink-lightest: #1e1e2e;
    --lexxy-color-ink: #cdd6f4;
  }
}

/* ─── GitHub Dark ─── */
.syntax-theme-github-dark {
  --syntax-bg: #0d1117;
  --syntax-text: #e6edf3;
  --syntax-comment: #8b949e;
  --syntax-punctuation: #e6edf3;
  --syntax-constant: #79c0ff;
  --syntax-string: #a5d6ff;
  --syntax-operator: #ff7b72;
  --syntax-keyword: #ff7b72;
  --syntax-function: #d2a8ff;
  --syntax-variable: #ffa657;

  --lexxy-color-code-token-att: #ff7b72;
  --lexxy-color-code-token-comment: #8b949e;
  --lexxy-color-code-token-function: #d2a8ff;
  --lexxy-color-code-token-operator: #ff7b72;
  --lexxy-color-code-token-property: #79c0ff;
  --lexxy-color-code-token-punctuation: #e6edf3;
  --lexxy-color-code-token-selector: #a5d6ff;
  --lexxy-color-code-token-variable: #ffa657;

  & code {
    --lexxy-color-ink-lightest: #0d1117;
    --lexxy-color-ink: #e6edf3;
  }
}

/* ─── VS Code Dark Modern ─── */
.syntax-theme-vscode-dark-modern {
  --syntax-bg: #1f1f1f;
  --syntax-text: #d4d4d4;
  --syntax-comment: #6a9955;
  --syntax-punctuation: #d4d4d4;
  --syntax-constant: #b5cea8;
  --syntax-string: #ce9178;
  --syntax-operator: #d4d4d4;
  --syntax-keyword: #c586c0;
  --syntax-function: #dcdcaa;
  --syntax-variable: #9cdcfe;

  --lexxy-color-code-token-att: #c586c0;
  --lexxy-color-code-token-comment: #6a9955;
  --lexxy-color-code-token-function: #dcdcaa;
  --lexxy-color-code-token-operator: #d4d4d4;
  --lexxy-color-code-token-property: #b5cea8;
  --lexxy-color-code-token-punctuation: #d4d4d4;
  --lexxy-color-code-token-selector: #ce9178;
  --lexxy-color-code-token-variable: #9cdcfe;

  & code {
    --lexxy-color-ink-lightest: #1f1f1f;
    --lexxy-color-ink: #d4d4d4;
  }
}