/* ============================================================
   tokens.css —— 新控制台设计令牌（浅色 / 深色双模式）
   ------------------------------------------------------------
   颜色、间距、圆角、阴影、层级全部收敛到这里；其余样式表只消费
   变量，不再出现字面色值。深色模式走 [data-cc-theme="dark"]，
   未手动选择时跟随系统（html 上没有 data-cc-theme 即用系统值）。
   ============================================================ */

/* ---------- 1. 尺寸与动效（与主题无关） ---------- */
:root {
    /* 字体族（依据《四站字体接入与可读性规范》§2.3）：文字族统一为站内自持的
       HarmonyOS Sans SC（font/font.css，四档字重 300/400/500/700），后面挂完整
       系统回退链 —— 缺号子集里的生僻字会落到这里，属已知且接受的效果。 */
    --cc-font: "HarmonyOS Sans SC", -apple-system, BlinkMacSystemFont, "PingFang SC",
        "Hiragino Sans GB", "Microsoft YaHei", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    /* 标题与正文同一族（保留 --cc-serif 这个名字，便于将来单独换标题族）。 */
    --cc-serif: var(--cc-font);
    /* 数字与日期用族：本轮起也走 Harmony（满足「全部替换」）。 */
    --cc-mono: "HarmonyOS Sans SC", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
        Consolas, "Courier New", monospace;
    /* 代码块与终端片段的唯一例外：等宽是功能不是装饰，别被文字族覆盖。 */
    --cc-code: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", "Courier New", monospace;
    /* 图标族：只挂在图标元素上，绝不挂容器（挂容器会把中文标签吃成方框）。 */
    --cc-icon-font: "svgicons", "HarmonyOS Sans SC", sans-serif;

    --cc-header-h: 56px;
    --cc-toolbar-h: 48px;
    --cc-shell-h: calc(var(--cc-header-h) + var(--cc-toolbar-h));
    --cc-content-w: 1280px;
    /* 与另外四站同一把尺子：宽屏页边 24，≤720 收到 18 */
    --cc-page-x: clamp(16px, 2.5vw, 24px);

    --cc-r-xs: 6px;
    --cc-r-sm: 8px;
    --cc-r-md: 12px;
    --cc-r-lg: 16px;
    --cc-r-full: 999px;

    --cc-sp-1: 4px;
    --cc-sp-2: 8px;
    --cc-sp-3: 12px;
    --cc-sp-4: 16px;
    --cc-sp-5: 24px;
    --cc-sp-6: 32px;

    --cc-fs-xs: 12px;
    --cc-fs-sm: 13px;
    --cc-fs-md: 14px;
    --cc-fs-lg: 16px;
    --cc-fs-xl: 20px;
    --cc-fs-2xl: 24px;

    /* 可读性基线（规范 §三）：正文桌面 16px、**移动端同为 16px**（不再 15.5px）、
       行高 1.8、字距 .012em。控件与密集表格仍走上面的 --cc-fs-* 档位，
       不受正文抬号影响（工具型界面靠字号档位保密度，正文靠基线上可读性）。 */
    --cc-fs-body: 16px;
    --cc-lh-body: 1.8;
    --cc-ls-body: .012em;
    /* 长文（预览 / 文章正文）比正文再松一档：行高 2.0、段距 20px、字距 .015em。 */
    --cc-lh-read: 2.0;
    --cc-ls-read: .015em;
    --cc-gap-read: 20px;

    --cc-ctl-h: 34px;
    --cc-touch: 44px;

    --cc-ease: cubic-bezier(.2, .8, .3, 1);
    --cc-dur: 160ms;

    --cc-z-sticky: 40;
    --cc-z-mask: 60;
    --cc-z-toast: 80;
}

/* ---------- 2. 浅色（默认） ---------- */
:root {
    color-scheme: light;

    --cc-bg: #f5f6f8;
    /* 表面三级（--cc-surface / -1 / -2 / -3）不在这里写色值，
       统一在文末 §19 映射到 /common/css/mz_surface.css 的令牌 */

    --cc-text: #14181f;
    --cc-text-2: #4b5565;
    --cc-text-3: #8592a3;
    --cc-text-inv: #ffffff;

    --cc-line: #e4e7ec;
    --cc-line-strong: #d3d8e0;

    --cc-brand: #2563eb;
    --cc-brand-hover: #1d4ed8;
    --cc-brand-soft: #e8effe;
    --cc-brand-text: #1e40af;

    --cc-ok: #10894a;
    --cc-ok-soft: #e3f6ea;
    --cc-warn: #a25b00;
    --cc-warn-soft: #fdf1dd;
    --cc-danger: #c0342b;
    --cc-danger-hover: #a72c24;
    --cc-danger-soft: #fdecea;

    --cc-hover: rgba(20, 24, 31, .045);
    --cc-active: rgba(20, 24, 31, .08);
    --cc-focus: #2563eb;

    --cc-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);
    --cc-shadow-2: 0 4px 14px rgba(16, 24, 40, .08);
    --cc-shadow-3: 0 18px 44px rgba(16, 24, 40, .16);

    --cc-notice-bg: #141a24;
    --cc-notice-text: #f4f6fa;
}

/* ---------- 3. 深色 ---------- */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]):not([data-cc-theme="light"]) {
        color-scheme: dark;

        --cc-bg: #0f1319;
        /* 表面三级见文末 §19（映射到 mz_surface.css 令牌） */

        --cc-text: #e8edf5;
        --cc-text-2: #a9b4c4;
        --cc-text-3: #7b8698;
        --cc-text-inv: #0f1319;

        --cc-line: #262f3b;
        --cc-line-strong: #33404f;

        --cc-brand: #5b8dff;
        --cc-brand-hover: #7ba4ff;
        --cc-brand-soft: #1b2740;
        --cc-brand-text: #a9c4ff;

        --cc-ok: #4ade80;
        --cc-ok-soft: #14301f;
        --cc-warn: #f0b429;
        --cc-warn-soft: #33270f;
        --cc-danger: #f87171;
        --cc-danger-hover: #fca5a5;
        --cc-danger-soft: #35191a;

        --cc-hover: rgba(232, 237, 245, .06);
        --cc-active: rgba(232, 237, 245, .1);
        --cc-focus: #5b8dff;

        --cc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
        --cc-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
        --cc-shadow-3: 0 18px 44px rgba(0, 0, 0, .55);

        --cc-notice-bg: #efe3c8;
        --cc-notice-text: #241d10;
    }
}

html[data-theme="dark"],
html[data-cc-theme="dark"] {
    color-scheme: dark;

    --cc-bg: #0f1319;
    /* 表面三级见文末 §19（映射到 mz_surface.css 令牌） */

    --cc-text: #e8edf5;
    --cc-text-2: #a9b4c4;
    --cc-text-3: #7b8698;
    --cc-text-inv: #0f1319;

    --cc-line: #262f3b;
    --cc-line-strong: #33404f;

    --cc-brand: #5b8dff;
    --cc-brand-hover: #7ba4ff;
    --cc-brand-soft: #1b2740;
    --cc-brand-text: #a9c4ff;

    --cc-ok: #4ade80;
    --cc-ok-soft: #14301f;
    --cc-warn: #f0b429;
    --cc-warn-soft: #33270f;
    --cc-danger: #f87171;
    --cc-danger-hover: #fca5a5;
    --cc-danger-soft: #35191a;

    --cc-hover: rgba(232, 237, 245, .06);
    --cc-active: rgba(232, 237, 245, .1);
    --cc-focus: #5b8dff;

    --cc-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --cc-shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --cc-shadow-3: 0 18px 44px rgba(0, 0, 0, .55);

    --cc-notice-bg: #efe3c8;
    --cc-notice-text: #241d10;
}

/* ---------- 4. 基础重置 ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    background: var(--cc-bg);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--cc-bg);
    color: var(--cc-text);
    font-family: var(--cc-font);
    /* 正文字号与行高走可读性基线（§三）：16px / 1.8 / .012em */
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-body);
    letter-spacing: var(--cc-ls-body);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    margin: 0;
    /* 字重只用 300 / 400 / 500 / 700：本站没有 800/900 子集，写了会合成假粗糊边。
       标题取 700（真 Bold 子集），与主站口径一致。 */
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.005em;
    /* 标题断行：避免末行只掉一两个字（孤字行） */
    text-wrap: balance;
}

p {
    margin: 0;
    /* 长段落断行：避免最后一行出现单个标点或单字 */
    text-wrap: pretty;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

a {
    color: var(--cc-brand);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

button,
input,
select,
textarea {
    /* button / input / select / textarea 在部分浏览器不继承 font-family，
       这里显式补一句（规范 §6.2 第 5 条），否则工具栏与表单会残留浏览器的默认字体。 */
    font: inherit;
    font-family: inherit;
    color: inherit;
    letter-spacing: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

img,
svg {
    max-width: 100%;
    vertical-align: middle;
}

[hidden] {
    display: none !important;
}

:focus-visible {
    outline: 2px solid var(--cc-focus);
    outline-offset: 2px;
    border-radius: var(--cc-r-xs);
}

::selection {
    background: var(--cc-brand-soft);
    color: var(--cc-brand-text);
}

/* 滚动条与主题一致（WebKit / Blink） */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--cc-line-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--cc-line-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--cc-r-full);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--cc-text-3);
    background-clip: content-box;
}

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- 5. 通用工具类 ---------- */
.cc-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.cc-skip {
    position: absolute;
    left: var(--cc-sp-3);
    top: -60px;
    z-index: var(--cc-z-toast);
    padding: 8px 14px;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-r-sm);
    box-shadow: var(--cc-shadow-2);
    transition: top var(--cc-dur) var(--cc-ease);
}

.cc-skip:focus {
    top: var(--cc-sp-3);
}

.cc-ic {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
}

.cc-ic svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* 直接生成的图标（不在 .cc-ic 里时也要有确定尺寸，避免 SVG 按默认 300×150 撑开） */
.cc-svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    fill: currentColor;
}

/* ============================================================
   §18 字体接入与可读性（依据《四站字体接入与可读性规范》§三，任务 261016-01）
   ------------------------------------------------------------
   ⚠ 整节可一次性删除，不影响其它模块 —— 回滚字体与可读性就删到本行以上为止。
   本节只做两件事：① 把 §三 的八条基线落到选择器上；② 给出可复用的工具类。
   字体文件与 @font-face 在 font/font.css（各页 head 在本站样式表之前引一次）。
   ============================================================ */

/* 18.1 正文字号 16px / 行高 1.8 / 字距 .012em —— 见 :root 的 --cc-fs-body 等令牌与 body 规则。 */

/* 18.2 长文（文章预览、正文阅读区）比正文再松一档：行高 2.0、段距 20px、字距 .015em */
.cc-read {
    font-size: var(--cc-fs-body);
    line-height: var(--cc-lh-read);
    letter-spacing: var(--cc-ls-read);
}

.cc-read p,
.cc-read li,
.cc-read blockquote {
    margin-block: var(--cc-gap-read);
    text-wrap: pretty;
}

.cc-read h2,
.cc-read h3 {
    text-wrap: balance;
}

/* 18.3 标题 balance 断行 / 长段落 pretty 断行 —— 见上面的 h1–h4 与 p 规则。 */

/* 18.4 统计数字与日期：等宽数字，位数不跳动（表格、计数、徽标、时间） */
.cc-num,
.cc-count,
.cc-badge,
.cc-item-meta,
.cc-key,
td,
th,
time {
    font-variant-numeric: tabular-nums;
}

/* 18.5 代码与终端片段：等宽族是功能例外，不被 Harmony 覆盖 */
code,
kbd,
samp,
pre,
.cc-code {
    font-family: var(--cc-code);
    font-variant-ligatures: none;
}

/* 18.6 图标：图标元素单独指定图标族，容器一律不挂 */
.cc-iconfont,
.cc-ic--font {
    font-family: var(--cc-icon-font);
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    speak: never;
}

/* 18.7 禁用 800 / 900（无对应子集 → 合成假粗，中文糊边）。
   兜底拦截：万一样式或内联样式写了 800/900，收敛回真 Bold 子集。 */
b,
strong,
[style*="font-weight: 800"],
[style*="font-weight:800"],
[style*="font-weight: 900"],
[style*="font-weight:900"] {
    font-weight: 700;
}

/* 18.8 移动端正文字号保持 16px（不再降到 15.5px） */
@media (max-width: 720px) {
    :root {
        --cc-fs-body: 16px;
    }

    body {
        font-size: var(--cc-fs-body);
    }
}

/* ============================================================
   §19 表面三级：后台接到全站那一枚玻璃上（261101 · 轮 102）
   ------------------------------------------------------------
   后台有自己的 --cc-* 令牌体系，从不引 mz_theme.css；但视觉上必须和前台
   是同一块纸。所以这里只做映射，色值一律来自 /common/css/mz_surface.css：

     --cc-surface   / -1  →  卡片 / 面板档（--mz-surface-card）
     --cc-surface-2      →  区域 / 分节带（--mz-surface-sect）
     --cc-surface-3      →  同上（原用于更浅一档的内嵌底，玻璃下并成一档）
     --cc-surface-float  →  浮层档（--mz-surface-float）：下拉菜单等压在正文上、
                            文字必须读得清的少数派，与前台浮层同一浓度

   明暗由 <html data-theme="light|dark"> 决定（mz-theme-init.js 保证存在），
   mz_surface.css 自带两档取值，这里不需要再按主题分支写一遍。
   ============================================================ */
:root,
html[data-theme="dark"],
html[data-cc-theme="dark"] {
    --cc-surface: var(--mz-surface-card);
    --cc-surface-1: var(--mz-surface-card);
    --cc-surface-2: var(--mz-surface-sect);
    --cc-surface-3: var(--mz-surface-sect);
    --cc-surface-float: var(--mz-surface-float);
}