/* ============================================================
   墨泓斋 · 表面层（Surface）
   ============================================================
   只回答一个问题：全站「一块纸」长什么样。

   三级表面（同一枚玻璃，只差浓度）
     --mz-surface-sect  区域 / 分节带 —— 最透，让上面的卡片浮起来
     --mz-surface-comp  组件：胶囊 / 按钮 / 徽标 / 输入框
     --mz-surface-card  卡片 / 面板：玻璃底 + 顶部斜向高光

   另有一档浮层（下拉菜单 / 弹窗，--mz-surface-float）：比卡片更浓、
   模糊更强。它不是「第四级纸」，而是同一枚玻璃在**文字必须读得清**
   时的唯一例外 —— 浮层底下压着正文，透过去就成了重影。

   谁引这一份
     · /common/css/mz_theme.css 头部 @import（home / huafans / engstudy）
     · /common/css/admin.css    第 1 条 @import（管理节点）
   管理节点从不引主题层（它有自己的 --cc-* 令牌体系），但又必须与前台
   是同一枚玻璃，所以令牌与卡片规则都收在这里，两边引同一份文件。

   约定
     1. 任何样式表都不要再写 rgba(255, 255, 255, …)、blur(..) saturate(..)
        这类字面量，一律取下面的令牌；
     2. 各站自己的卡片类只在第三节清单里出现一次，站点样式表只保留
        padding / display / grid / transition 这类排版属性；
     3. 深色只看 <html data-theme="dark">（mz-theme-init.js 保证它一定存在，
        跟随系统也由脚本折成 light / dark 两个值），不写 prefers-color-scheme，
        免得前台在没有 data-theme 的瞬间半深半浅。
   ============================================================ */

/* ---------- 1. 玻璃与模糊：浅色（默认） ---------- */
:root {
    --mz-glass: rgba(255, 255, 255, .74);
    --mz-glass-2: rgba(255, 255, 255, .5);
    --mz-glass-3: rgba(255, 255, 255, .32);
    --mz-bhair: rgba(255, 255, 255, .9);
    --mz-sheet: rgba(255, 255, 255, .16);

    --mz-surface-sect: var(--mz-glass-3);
    --mz-surface-comp: var(--mz-glass-2);
    --mz-surface-card:
        linear-gradient(160deg, var(--mz-sheet), rgba(255, 255, 255, 0) 44%),
        var(--mz-glass);

    /* 22px / 165% 是本轮对齐「同城推送」那张参考卡的读数：再淡一档就读成
       半透明色块，再浓一档就把卡片下面的内容糊死。 */
    --mz-blur: 22px;
    --mz-blur-sat: 165%;

    /* 浮层档：下拉菜单 / 弹窗。这一档的第一目标是**可读性**，美观排在后面。
       48px 模糊 + .965 的白底，是为了让底下的正文连轮廓都化掉 —— 二级菜单
       全是小字号条目，稍透一点就成重影，读起来要费劲（这条是本轮实测反馈
       后的定值：34px / .93 仍有底字轮廓，故再加浓一档）。 */
    --mz-glass-float: rgba(250, 252, 253, .965);
    --mz-surface-float:
        linear-gradient(160deg, var(--mz-sheet), rgba(255, 255, 255, 0) 42%),
        var(--mz-glass-float);
    --mz-blur-float: 48px;
    --mz-blur-float-sat: 180%;
}

/* ---------- 2. 玻璃与模糊：深色 ---------- */
[data-theme="dark"],
html[data-theme="dark"],
html[data-theme="ink"],
[data-cc-theme="dark"],
html[data-cc-theme="dark"] {
    --mz-glass: rgba(255, 255, 255, .055);
    --mz-glass-2: rgba(255, 255, 255, .03);
    --mz-glass-3: rgba(255, 255, 255, .02);
    --mz-bhair: rgba(255, 255, 255, .085);

    /* 深色下卡片顶部的高光收一档，否则一层白纱糊在近黑底上发灰 */
    --mz-sheet: rgba(255, 255, 255, .1);

    /* 深色浮层：底色必须是「近乎实心的深底」，不能再用低浓度的白 ——
       0.03 的白叠在近黑页面上等于没叠，底下文字照样透过来。 */
    --mz-glass-float: rgba(9, 14, 19, .96);
    --mz-surface-float:
        linear-gradient(160deg, var(--mz-sheet), rgba(255, 255, 255, 0) 44%),
        var(--mz-glass-float);
}

/* ---------- 3. 卡片 / 面板：全站唯一一处定义 ----------
   任何节点（home / huafans / engstudy / admin）的 .card / .panel /
   .entry-card / .cc-card … 都取这一份。描边、圆角、投影优先读主题层
   的 --mz-line / --mz-radius-l / --mz-shadow；管理节点没有这几个令牌，
   就落到按 currentColor 混出来的备用值上（浅深两档自动跟着文字色走）。 */
.mz-card,
.card,
.mz-panel,
.panel,
.tool,
.entry-card,
.quick,
.hf-card,
.site,
.tz-card,
.tz-panel,
.tz-log,
.tz-sect,
.cc-card,
.cc-panel,
.course-panel,
.course-card,
.mz-tile,
.mz-widecard,
.hero-mark,
.ask,
.mz-social,
.mz-side__block,
.mz-qr,
.mz-doc__toc,
.mz-doc,
.feed-item,
.feed-card-item,
.notice-item,
.mail-form {
    background: var(--mz-surface-card);
    border: 1px solid var(--mz-line, color-mix(in srgb, currentColor 13%, transparent));
    border-radius: var(--mz-radius-l, 18px);
    box-shadow: var(--mz-shadow, 0 24px 56px -42px rgba(8, 25, 32, .5));
    -webkit-backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
    backdrop-filter: blur(var(--mz-blur)) saturate(var(--mz-blur-sat));
}

/* 可点的卡片才抬一下，静态卡片保持不动（表达可点性，不是装饰） */
.quick--link:hover,
.hf-card:hover,
.entry-card:hover,
.cc-card--link:hover {
    transform: translateY(-2px);
}

/* ---------- 4. 窄屏降档 ----------
   手机 GPU 上大面积 backdrop-filter 很费电，卡片与胶囊的模糊统一降一档，
   而不是像以前那样在窄屏把所有模糊一刀切掉（切掉就等于退回实心块）。 */
@media (max-width: 640px) {
    :root {
        --mz-blur: 14px;
        --mz-blur-sat: 150%;
        /* 浮层降档但降得少一点：下拉菜单在手机上仍然是「要读的正文」 */
        --mz-blur-float: 32px;
        --mz-blur-float-sat: 170%;
    }
}