/* 代码高亮主题：highlight.js 11.9 的 token 类名。
   亮 / 暗双调色板通过 CSS 变量切换，与 Bootstrap 的 data-bs-theme 同源 ——
   App.razor <head> 的前置脚本在首屏渲染前就把主题写到 <html>，无需 JS 参与，
   主题切换即时生效（后台 ThemeProvider 改的就是同一个属性）。
   调色板取 GitHub 亮 / 暗两套，与站点的浅灰代码盒气质一致。 */
:root,
[data-bs-theme="light"] {
    --hljs-bg: #f6f8fa;
    --hljs-border: #d1d9e0;
    --hljs-fg: #1f2328;
    --hljs-comment: #6e7781;
    --hljs-keyword: #cf222e;
    --hljs-string: #0a3069;
    --hljs-number: #0550ae;
    --hljs-title: #8250df;
    --hljs-type: #953800;
    --hljs-variable: #953800;
    --hljs-tag: #116329;
    --hljs-meta: #0550ae;
    --hljs-punct: #57606a;
    --hljs-deletion: #82071e;
    --hljs-addition: #116329;
}

[data-bs-theme="dark"] {
    /* 比页面底色（--bs-body-bg 约 #1b1b1f）略亮一档，否则代码盒与正文背景糊成一片 */
    --hljs-bg: #161b22;
    --hljs-border: #30363d;
    --hljs-fg: #c9d1d9;
    --hljs-comment: #8b949e;
    --hljs-keyword: #ff7b72;
    --hljs-string: #a5d6ff;
    --hljs-number: #79c0ff;
    --hljs-title: #d2a8ff;
    --hljs-type: #ffa657;
    --hljs-variable: #ffa657;
    --hljs-tag: #7ee787;
    --hljs-meta: #79c0ff;
    --hljs-punct: #8b949e;
    --hljs-deletion: #ffa198;
    --hljs-addition: #7ee787;
}

/* 基础容器：highlightElement 会给 <code> 加 .hljs 类 */
.hljs {
    color: var(--hljs-fg);
    background: var(--hljs-bg);
}

/* 注释与引文 */
.hljs-comment,
.hljs-quote {
    color: var(--hljs-comment);
    font-style: italic;
}

/* 关键字 / 选择器标签 / 字面量 / 链接 */
.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-section,
.hljs-link {
    color: var(--hljs-keyword);
}

/* 字符串 / 正则 / 增补行 */
.hljs-string,
.hljs-regexp,
.hljs-addition,
.hljs-meta .hljs-string {
    color: var(--hljs-string);
}

/* 数字 / meta 行 */
.hljs-number,
.hljs-meta {
    color: var(--hljs-number);
}

/* 函数名 / 类名 / 标题 */
.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-class .hljs-title {
    color: var(--hljs-title);
}

/* 类型 / 内建符号 */
.hljs-type,
.hljs-built_in,
.hljs-builtin-name,
.hljs-class .hljs-title.class_ {
    color: var(--hljs-type);
}

/* 变量 / 属性 */
.hljs-variable,
.hljs-template-variable,
.hljs-attr,
.hljs-attribute,
.hljs-selector-attr,
.hljs-selector-pseudo {
    color: var(--hljs-variable);
}

/* HTML/XML 标签名 */
.hljs-name,
.hljs-selector-id,
.hljs-selector-class {
    color: var(--hljs-tag);
}

/* 符号 / 强调 / 公式 / doctag */
.hljs-symbol,
.hljs-bullet,
.hljs-formula,
.hljs-doctag {
    color: var(--hljs-meta);
}

.hljs-strong {
    font-weight: 600;
}

.hljs-emphasis {
    font-style: italic;
}

/* 删除 / 增补行（diff） */
.hljs-deletion {
    color: var(--hljs-deletion);
}

/* 标点与运算符最弱化，不抢语法色 */
.hljs-punctuation,
.hljs-operator {
    color: var(--hljs-punct);
}

/* 前台正文里的代码块：盒式样式（内边距 / 圆角 / 边框）在 Prose.razor.css 的 pre 上，
   这里把整个盒子的背景换成高亮调色板 —— 用 :has() 让这条选择器特异性高于
   Prose 的隔离样式（`.prose pre[b-xxxx]`），从而稳定接管背景与边框；未走高亮的代码块
   （JS 未执行 / 语言未注册）仍用 Bootstrap 第三级别底色兜底。 */
.prose pre:has(> code.hljs) {
    background: var(--hljs-bg);
    border-color: var(--hljs-border);
}

.prose pre code.hljs {
    background: transparent;
    border: 0;
}

/* 后台预览（如 Hero 富文本说明区）同样生效 */
.hero-rich pre:has(> code.hljs) {
    background: var(--hljs-bg);
    border-color: var(--hljs-border);
}