/**
 * variables.css — CSS 变量统一定义文件
 * ------------------------------------------------------------
 * 作用：定义所有 CSS 变量的默认值（浅色 + 深色主题）
 * 加载顺序：variables.css → style.css → theme.css（后台生成）→ custom.css（自由CSS）
 * 后台自定义样式：修改后生成 theme.css，会覆盖此处的默认值
 * 注意：此文件只定义变量，不包含任何业务样式
 */

/* ---------- LOGO 微光的「呼吸」令牌（需 @property 注册才能被动画/过渡插值）----------
   自定义属性默认只能整值跳变：不注册的话呼吸会变成每 2 秒一次的闪灯，hover 也会瞬切。
   ⚠️ 呼吸只能靠 blur 表达；drop-shadow 的第 4 个 spread 参数在本机 Chromium 会让整条 filter
      判为无效（computed filter 变 none，微光全消失），绝不能用来做扩散。 */
@property --logo-glow-breath { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --logo-glow-boost { syntax: '<number>'; inherits: true; initial-value: 1; }

:root {
    /* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */
    /* 背景 */
    /* 页面底色必须给真实字面量：此值被 html/body 背景直接引用，若写成自引用
       （var(--color-bg-page) 指向自身）则为无效值，首帧画布会退回浏览器默认白色，
       表现为每次跳转/刷新「整页白闪」——这正是此前的闪烁根因。theme.css 仍会覆盖它。 */
    --color-bg-page: #f3f6f8;
    --color-bg-card: #FFFFFF;
    --color-bg-card-2: var(--color-bg-card-2);
    --color-bg-header: #FFFFFF;
    --color-bg-header-2: #FFFFFF;
    --color-bg-sidebar: #FFFFFF;
    --color-bg-sidebar-2: #FFFFFF;
    --color-bg-footer: var(--color-text-title);
    --color-bg-page-soft: var(--color-bg-page);
    --color-bg-tag: var(--color-bg-tag);
    --color-bg-tag-hover: var(--color-bg-tag-hover);
    /* 分类标签（.res-list-cat 列表 / .res-card-cat 网格卡 / .doc-info-tag.tag-cat 详情页）
       —— **三处共用同一套**（2026-10-03 统一，此前网格/详情页写死 #4f46e5 实心底，
       列表页用本组淡强调底，两套做法 → 换主题时分类标签会分叉）。
       淡强调底 + 强调字 + 1px 细边 + 柔和辉光，全部跟随浅/深主题。
       辉光 10px/45%：与详情页其余标签（版本/扩展/语言/年份）同档，
       此前本组是 8px/28%、其余是 10px/45%，同为「分类标签」强度却差一档。 */
    --color-cat-bg: color-mix(in srgb, var(--color-accent) 12%, transparent);
    --color-cat-fg: color-mix(in srgb, var(--color-accent) 70%, var(--color-text-title));
    --color-cat-border: color-mix(in srgb, var(--color-accent) 30%, transparent);
    --color-cat-glow: 0 0 10px color-mix(in srgb, var(--color-accent) 45%, transparent);
    /* 语义标签底色（.tag-edition 扩展内容 / .tag-size 容量大小）：
       2026-10-03 自tags.css 的字面量 #9333ea / #555 收进此处。
       扩展=紫、容量=中性深灰，均为**语义固定色**（不随主题主色变，
       否则「扩展=紫」「容量=灰」的语义会丢），故深浅两套用同值。 */
    --color-tag-edition: #9333ea;
    --color-tag-edition-glow: 0 0 10px color-mix(in srgb, #9333ea 45%, transparent);
    --color-tag-size: #555555;
    --color-tag-size-glow: 0 0 10px color-mix(in srgb, #555555 45%, transparent);
    /* 新增/更新徽章的「深金端点」：徽章底色是琥珀金→深金的横向渐变 + 扫光，
       #7a4a00 是压暗用的深金（同一色相压暗，保证渐变不脏）。
       语义固定色（不随主题）：徽章必须永远是金色系，否则「新增/更新」会跟主色混淆。 */
    --color-badge-gold-deep: #7a4a00;
    /* ---------- 站点 LOGO（金色闪电）专用 ----------
       LOGO 是品牌资产，颜色**不随主题**变（换了主题它仍是同一张金色闪电）。
       这里只把「配套的视觉待遇」做成可调项，供 header.css 的多层drop-shadow 使用：
       - blur 是光晕的「总半径」，各层按比例取它的 .22/.55/1/1.9 倍，层层叠加出四周扩散感；
       - 浅色主题 alpha 反而更高（白底上金色光晕容易被吃掉，要更实才看得见）；
       - 深色主题 blur 更大（暗底上需要更宽的光才能「浮」出来）。
       ⚠️ 各发光层的 offset 必须是 0（径向）；带 y 偏移就变成单边发光。
       ⚠️ 不要给 .app-logo-img 加 ::before 底衬色块 —— 那是独立图层，
          不受 img 的 filter 影响，会形成一块色板把闪电压住。 */
    --logo-glow-color: #f5b70a;      /* 与 LOGO 主金色同色相 */
    /* 呼吸两端的取值（base=呼气末，peak=吸气末）。真正的 --logo-glow-blur/-alpha 由
       header.css 在 .app-logo-img img 上用 calc 从这两对值插值出来 —— 写成 :root 的
       calc() 是无效的（自定义属性在「声明它的那一层」就完成替换，子元素上再动画
       --logo-glow-breath 影响不到已解析好的 :root 值）。此处只留静态兜底，
       让任何未挂呼吸选择器的 LOGO 仍是 base 观感。 */
    --logo-glow-blur-base: 9px;
    --logo-glow-blur-peak: 12px;
    --logo-glow-alpha-base: .42;     /* 浅色主题：白底上光晕易被吃掉，故比深色更实 */
    --logo-glow-alpha-peak: .50;
    --logo-glow-blur: var(--logo-glow-blur-base);
    --logo-glow-alpha: var(--logo-glow-alpha-base);
    /* 呼吸相位 0→1→0（header.css 的 keyframes 驱动）；hover 亮度倍率（transition 只过渡它）。
       两者都必须 @property 注册，否则只能整值跳变。 */
    --logo-glow-breath: 0;
    --logo-glow-boost: 1;
    /* 文字 */
    --color-text-title: var(--color-text-title);
    --color-text-primary: var(--color-text-primary);
    --color-text-secondary: var(--color-text-secondary);
    --color-text-dim: var(--color-text-dim);
    --color-text-invert: #FFFFFF;
    --color-accent-ink: var(--color-text-title);   /* 金色/强调底文字色（默认深色，后台可自定义） */
    /* 强调/主色 */
    --color-accent: var(--color-accent);
    --color-accent-hover: var(--color-accent-hover);
    --color-accent-dark: var(--color-accent-dark);
    --color-accent-soft: rgba(255,215,0,.12);
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    /* 边框 */
    --color-border: var(--color-border);
    --color-border-strong: var(--color-border-strong);
    --color-border-mid: var(--color-border-mid);
    --color-border-soft: var(--color-border);
    --color-border-width: 1px;
    /* 导航 */
    --color-nav-link: var(--color-text-primary);
    --color-nav-link-hover: var(--color-accent);
    --color-nav-link-active: var(--color-accent);
    /* 侧栏 */
    --color-sidebar-text: var(--color-text-primary);
    --color-sidebar-text-dim: var(--color-text-dim);
    --color-sidebar-hover: var(--color-bg-tag);
    --color-sidebar-active-bg: rgba(255,215,0,.12);
    --color-sidebar-active-text: var(--color-accent);
    --color-sidebar-border: var(--color-border);
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-size-base: 14px;
    --font-size-title: 20px;
    --font-line-height: 1.6;
    /* 正文字重。500 而非 400：微软雅黑/苹方在 400 下笔画偏细、发灰，
       中文小字号（13~15px）读起来发虚；500 是「正文可读、界面不粗」的平衡点。
       标题层级（700/800）不受此变量影响，仍按--font-weight-title走。 */
    --font-weight-base: 500;
    /* 圆角 */
    --radius-card: 12px;
    --radius-sm: 8px;
    --main-radius: 14px;
    /* 阴影 */
    --main-shadow: 0 4px 16px rgba(0,0,0,0.08);
    --shadow-sm: 0 2px 8px rgba(0,0,0,0.04);
    /* 下载面板图标（.dl-item-ic / .dl-item-letter）投影：只给「颜色+偏移+模糊」三值，
       供 filter: drop-shadow(var(--icon-shadow)) 使用（drop-shadow 无 spread，格式与 box-shadow 去掉 spread 完全一致） */
    --icon-shadow: 0 2px 8px rgba(0,0,0,0.16);
    --main-shadow-hover: 0 8px 24px rgba(0,0,0,0.12);
    /* 间距 */
    --gap-block: 24px;
    /* 状态色（warning 由主题系统经 --color-warning 注入，这里别名桥接，避免前端用 --warning 取不到值） */
    --warning: var(--color-warning);
    --warning-soft: color-mix(in srgb, var(--color-warning) 16%, transparent);
    --blue: #3b82f6; /* 静态装饰蓝（会员中心统计图标/数字，非主题项） */
    --green: var(--color-success);
    --amber: var(--color-warning);
    --orange: #f97316; /* 静态装饰橙（会员中心统计图标，非主题项） */
    --red: var(--color-danger);
    /* 通知/危险（收藏更新铃铛徽标等） */
    --color-danger: var(--color-danger);
    --color-warning: var(--color-warning);
    --color-success: var(--color-success);
    /* 信息/日期（年份标签等，date 语义；浅色主题默认蓝） */
    --color-info: #2563eb;
    /* ∞续航者·黑金徽章专用：深空黑底 → 黑金渐变 */
    --color-lifetime-bg: var(--color-bg-page);
    --color-lifetime-bg-2: var(--color-lifetime-bg-2);
    /* 典藏·永续者徽章的金属金（文字/描边发光统一走它，深浅主题同值） */
    --color-lifetime-gold: #e8c46a;
    /* 会员暖金（静态装饰色，非主题项） */
    --color-gold-tan: #d4af6a;
    /* 会员中心/工单表单（member.css 引用；映射到既有变量，避免未定义导致样式失效） */
    --color-bg-input: var(--color-bg-card);
    --color-bg-soft: var(--color-bg-page-soft);
    --color-text-body: var(--color-text-primary);
    /* 其他 */
    --overlay: rgba(0,0,0,.55);
    --overlay-soft: rgba(0,0,0,.45);
    /* 固定白底区（.dlmodal 打赏码 / 二维码 / 进度占位）专用色。
       这块区域**恒为白底**（深色主题下也是），故其上的文字/描边必须用固定深色，
       不能跟随主题—— 深色主题的文字变量在白底上会看不见。
       2026-10-03 由 right.css 的字面量收进此处，深浅两套同值。 */
    --color-onwhite-bg: #ffffff;
    --color-onwhite-dim: #6b7280;        /* 白底上的次级说明文字 */
    --color-onwhite-text: #0b0f14;       /* 白底上的正文深墨 */
    --color-onwhite-danger: #b91c1c;     /* 白底上的错误提示 */
}

[data-theme="dark"] {
    /* 深色主题变量，每个只定义一次 */
    /* 同浅色：给真实字面量，避免首帧画布退回默认白色（theme.css 会覆盖） */
    --color-bg-page: #0c1219;
    --color-bg-card: var(--color-bg-card);
    --color-bg-card-2: var(--color-bg-card-2);
    --color-bg-header: var(--color-bg-page);
    --color-bg-header-2: var(--color-bg-card);
    --color-bg-sidebar: var(--color-bg-card);
    --color-bg-sidebar-2: var(--color-bg-card-2);
    --color-bg-footer: var(--color-bg-page);
    --color-bg-page-soft: var(--color-bg-card);
    --color-bg-tag: var(--color-bg-card-2);
    --color-bg-tag-hover: var(--color-bg-tag-hover);
    /* 分类标签（深色）：强调底更深、字更亮、辉光更明显，保证在暗底上可读且有微光。
       辉光同样10px/45% 与浅色同档（2026-10-03 统一，原深色是 8px/30%）。 */
    --color-cat-bg: color-mix(in srgb, var(--color-accent) 18%, transparent);
    --color-cat-fg: color-mix(in srgb, var(--color-accent) 90%, var(--color-text-title));
    --color-cat-border: color-mix(in srgb, var(--color-accent) 40%, transparent);
    --color-cat-glow: 0 0 10px color-mix(in srgb, var(--color-accent) 45%, transparent);
    /* LOGO 微光（深色主题）：暗底上金色本就不刺眼，微光可加强，
       让透明 LOGO 在深色背景上「浮」出来而不是贴成一块平色。 */
    --logo-glow-alpha-base: .62;
    --logo-glow-alpha-peak: .72;
    --logo-glow-blur-base: 13px;
    --logo-glow-blur-peak: 17px;
    --color-text-title: var(--color-text-title);
    --color-text-primary: var(--color-text-primary);
    --color-text-secondary: var(--color-text-secondary);
    --color-text-dim: var(--color-text-dim);
    --color-text-invert: #FFFFFF;
    --color-accent-ink: var(--color-bg-page);   /* 金色/强调底文字色（深色模式同样深色，后台可自定义） */
    --color-accent: var(--color-accent);
    --color-accent-hover: var(--color-accent);
    --color-accent-dark: var(--color-accent-dark);
    --color-accent-soft: rgba(255,215,0,.16);
    --color-accent-gradient: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
    --color-border: var(--color-border);
    --color-border-strong: var(--color-border-strong);
    --color-border-mid: var(--color-border-strong);
    --color-border-width: 1px;
    --color-nav-link: var(--color-text-title);
    --color-nav-link-hover: var(--color-accent);
    --color-nav-link-active: var(--color-accent);
    --color-sidebar-text: var(--color-text-primary);
    --color-sidebar-text-dim: var(--color-text-secondary);
    --color-sidebar-hover: var(--color-bg-tag-hover);
    --color-sidebar-active-bg: rgba(255,215,0,.16);
    --color-sidebar-active-text: var(--color-accent);
    --color-sidebar-border: var(--color-border);
    /* 通知/危险 */
    --color-danger: var(--color-danger);
    --color-warning: var(--color-warning);
    --color-success: var(--color-success);
    /* 信息/日期（年份标签等；深色主题默认更亮蓝，保证在暗底上可读） */
    --color-info: #3b82f6;
    /* ∞续航者·黑金徽章专用：深空黑底 → 黑金渐变 */
    --color-lifetime-bg: var(--color-bg-page);
    --color-lifetime-bg-2: var(--color-lifetime-bg-2);
    /* 典藏·永续者徽章的金属金（深浅主题同值，保证徽章观感一致） */
    --color-lifetime-gold: #e8c46a;
    --main-shadow: 0 4px 16px rgba(0,0,0,0.3);
    /* 图标投影在深色底上要加深，否则 0.16 的黑影几乎看不见 */
    --icon-shadow: 0 2px 8px rgba(0,0,0,0.45);
    /* 会员中心/工单表单（深色模式，映射到既有变量） */
    --color-bg-input: var(--color-bg-card);
    --color-bg-soft: var(--color-bg-card-2);
    --color-text-body: var(--color-text-primary);
    /* 固定白底区色组（--color-onwhite-*）**故意不在深色下重定义**：
       那块区域浅深主题都是白底，色值必须一致才能保证白底上的文字始终可读。 */
}

/* ============================================================
 * 个人中心（会员中心）设计令牌 —— 仅「非颜色」令牌
 * ------------------------------------------------------------
 * 颜色一律派生自 --color-*（后台可自定义，见 theme.css / FIELD_VAR），
 * 此处只定义间距 / 圆角 / 字号，与主题无关，故不区分深浅模式。
 * 命名前缀 --mc- 以避免与既有 --radius-card / --radius-sm 语义冲突。
 * 使用范围：.member-center（个人中心页面），详见 member.css。
 * ============================================================ */
:root {
    /* 圆角 */
    --mc-radius-card: 16px;
    --mc-radius-sm: 8px;
    --mc-radius-full: 9999px;

    /* 间距（8px 基准网格） */
    --mc-gap-xs: 4px;
    --mc-gap-sm: 8px;
    --mc-gap-md: 12px;
    --mc-gap-lg: 16px;
    --mc-gap-xl: 24px;
    --mc-gap-2xl: 32px;

    /* 字号层级 */
    --mc-font-h1: 24px;
    --mc-font-h2: 20px;
    --mc-font-h3: 16px;
    --mc-font-body: 14px;
    --mc-font-small: 13px;
    --mc-font-tiny: 12px;

    /* 动效曲线（统一过渡，避免各处写死不同缓动） */
    --mc-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mc-dur: 0.25s;
    --mc-dur-tab: 0.3s;

    /* 最小可点击高度（无障碍：移动端 ≥44px） */
    --mc-tap: 44px;
}