/* Generated by frontend/build_styles.py; edit frontend/styles/. */

/* Source: syntax/automatic.css */
/* Only Automatic follows the site. Explicit Highlight.js themes stay isolated. */
html[data-theme="dark"][data-code-theme="auto"] {
  --syntax-comment: #aab4c0;
  --syntax-keyword: #d8b4fe;
  --syntax-tag: #ffabb7;
  --syntax-string: #a4e6aa;
  --syntax-literal: #f5ce8b;
  --syntax-title: #9bc8ff;
}

/* Only automatic syntax follows the UI; manual themes keep even light backgrounds. */
html[data-theme="dark"][data-code-theme="auto"] .hljs {
  background: var(--ui-bg);
  color: var(--ui-code-text);
  border: 1px solid var(--ui-code-border);
  border-radius: 6px;
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-comment, .hljs-quote) {
  color: var(--syntax-comment);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-keyword, .hljs-doctag, .hljs-formula, .hljs-selector-tag) {
  color: var(--syntax-keyword);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-section, .hljs-name, .hljs-tag, .hljs-template-tag) {
  color: var(--syntax-tag);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-string, .hljs-regexp, .hljs-attribute, .hljs-meta .hljs-string) {
  color: var(--syntax-string);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(
    .hljs-number,
    .hljs-literal,
    .hljs-attr,
    .hljs-type,
    .hljs-variable,
    .hljs-template-variable,
    .hljs-selector-class,
    .hljs-selector-attr,
    .hljs-selector-pseudo
  ) {
  color: var(--syntax-literal);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(
    .hljs-symbol,
    .hljs-bullet,
    .hljs-link,
    .hljs-meta,
    .hljs-selector-id,
    .hljs-title
  ) {
  color: var(--syntax-title);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-built_in, .hljs-title.class_, .hljs-class .hljs-title) {
  color: var(--syntax-literal);
}
html[data-theme="dark"][data-code-theme="auto"]
  :is(.hljs-subst, .hljs-params, .hljs-punctuation, .hljs-operator) {
  color: var(--ui-code-text);
}
html[data-theme="dark"][data-code-theme="auto"] .hljs-addition {
  background-color: var(--ui-success-bg);
  color: var(--ui-success);
}
html[data-theme="dark"][data-code-theme="auto"] .hljs-deletion {
  background-color: var(--ui-danger-bg);
  color: var(--ui-danger);
}