/* =========================================================
   LiteBox v5 · tokens.css — 全站唯一色值来源
   其它任何 CSS / JS 不得出现硬编码颜色，一律引用此处变量。
   ========================================================= */
:root{
  /* 表面 */
  --bg:#f4f6fb; --card:#ffffff; --card2:#f8fafd;
  --line:#e5e9f2; --line-soft:rgba(229,233,242,.7);
  /* 文字（Step 8 对比度：--fg3 2.40:1 → 4.87:1 白底 / 4.53:1 #f4f6fb 底） */
  --fg:#1a2233; --fg2:#616c85; --fg3:#6b7488;
  /* 品牌（Step 8 对比度：白字 4.17:1 → 5.39:1 / 3.91:1 → 5.70:1，≥4.5:1） */
  --brand1:#4a5ae6; --brand2:#7c3aed;
  /* Step 12 · 首页 hero 标题三段渐变（第三段是任务书给的 #e05cff）。
     按红线「tokens.css 之外不得出现硬编码颜色」，收口到这里。 */
  --brand3:#e05cff;
  --brand-grad:linear-gradient(120deg,var(--brand1),var(--brand2));
  --brand-grad-3:linear-gradient(120deg,var(--brand1) 0%,var(--brand2) 60%,var(--brand3) 100%);
  /* Step 12 · 徽章投影（比 --shadow-sm 更轻，仅用于 hero 徽章） */
  --badge-shadow:0 1px 3px rgba(0,0,0,.04);
  /* 语义（Step 8 对比度：--ok 3.38:1 → 4.63:1；--warn 2.19:1 → 5.17:1） */
  --ok:#12864a; --warn:#96621a; --err:#d03050;
  /* 圆角 */
  --radius-sm:10px; --radius:16px; --radius-lg:22px; --radius-pill:999px;
  /* 阴影 */
  --shadow-sm:0 3px 14px rgba(26,34,51,.07);
  --shadow:0 10px 34px rgba(26,34,51,.09);
  --shadow-float:0 18px 48px rgba(22,32,62,.16);
  /* 动效 */
  --ease-spring:cubic-bezier(.34,1.3,.36,1);
  --ease-glide:cubic-bezier(.32,.94,.28,1);
  --dur:260ms;
  /* 尺寸 */
  --head-h:60px; --nav-h:54px;
  --safe-bottom:env(safe-area-inset-bottom,0px);
  /* Step 21 · 三：导航条与弹层的层叠关系集中在这里算，layout.css 只引用变量。
     弹层底边 = 导航条顶边 + 8px 间隙（导航条浮在遮罩之上，不需要额外补偿）。 */
  --tabbar-h:64px;
  --tabbar-bottom:calc(8px + var(--safe-bottom));
  --sheet-gap:8px;
  --sheet-bottom:calc(var(--tabbar-h) + var(--tabbar-bottom) + var(--sheet-gap));

  /* —— Step 10 · 间距梯度（4px 基网格，全站 gap/padding/margin 收敛到此） —— */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:12px;
  --sp-4:16px;
  --sp-5:20px;
  --sp-6:24px;
  --sp-7:32px;
  --sp-8:40px;

  /* —— Step 30 · 下拉刷新手势变量 ——
     ui/pull.js 经 style.setProperty 实时下发位移与图标角度，
     这里只给初值（红线要求：CSS 引用的变量必须在 tokens.css 有定义）。 */
  --ptr-y:0px;        /* 提示条竖向位移 */
  --ptr-rot:0deg;     /* 提示条箭头角度 */

  /* —— Step 10 · 字号梯度（5+1 级，层级：xs < sm < base < md < lg < xl） —— */
  --fs-xs:12px;      /* 徽章、时间戳 */
  --fs-sm:13px;      /* 辅助标签 */
  --fs-base:14px;    /* 正文、说明 */
  --fs-md:16px;      /* 小标题、卡片标题 */
  --fs-lg:20px;      /* 工具页 h2、大号数字 */
  --fs-xl:28px;      /* 大结果展示 */

  /* —— Step 10 · 状态变化微动效（曲线 + 时长；--ease-spring/--dur 沿用既有定义） —— */
  --ease-out:cubic-bezier(.22,1,.36,1);
  --ease-in-out:cubic-bezier(.4,0,.2,1);
  --dur-fast:160ms;
  --dur-base:260ms;
  --dur-slow:420ms;
  /* 玻璃 */
  --glass-bg:color-mix(in srgb,var(--card) 78%,transparent);
  --glass-border:color-mix(in srgb,#fff 46%,transparent);
  --glass-blur:22px;

  /* —— 以下为派生环境色（同样只允许在此处定义） —— */
  /* 品牌底上的前景色（按钮/选中 chip 文字） */
  --on-accent:#ffffff;
  /* 页面渐变光斑（随品牌色同步更新） */
  --glow1:rgba(74,90,230,.20);
  --glow2:rgba(124,58,237,.16);
  /* 文本选区 */
  --sel-bg:rgba(74,90,230,.25);
  /* 浮层内嵌高光（玻璃顶缘） */
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.55);
  /* 弹层遮罩 */
  --mask-bg:rgba(8,12,24,.42);
  /* Step 21 · 三：导航条浮在遮罩之上，所以遮罩要更淡一档（.42 → .28），
     否则底部导航条被压在一块黑斑里。 */
  --mask-bg-soft:rgba(10,14,25,.28);
  /* 弹层上浮投影 */
  --sheet-shadow:0 -8px 60px rgba(18,28,58,.2);
  /* 弹层底色
     Step 5G：Step 5F 降到 62%/52% 导致弹层半透明、玻璃感消失（用户反馈"样式坏了"）。
     恢复为接近实心的白/暗色面，玻璃感由 .sheet 的 backdrop-filter:blur(30px) 提供。 */
  --sheet-bg:var(--card);
  /* 输入框 focus 光环 */
  --ring:0 0 0 3px rgba(74,90,230,.14);
  /* 拖放高亮底色 */
  --drop-bg:color-mix(in srgb,var(--brand1) 7%,transparent);
  /* 语义色淡底（toast 图标点等） */
  --ok-soft:color-mix(in srgb,var(--ok) 16%,transparent);
  --warn-soft:color-mix(in srgb,var(--warn) 16%,transparent);
  --err-soft:color-mix(in srgb,var(--err) 16%,transparent);

  /* —— Step 2 首页 —— */
  /* 搜索框 focus 光环（大号） */
  --ring-lg:0 0 0 4px rgba(74,90,230,.14);
  /* 选中 chip 投影 */
  --chip-shadow:0 5px 14px rgba(74,90,230,.32);
  /* 收藏星金色 */
  --fav-gold:#f59e0b;
  /* 区块标题图标底 */
  --ct-ic-bg:linear-gradient(135deg,rgba(74,90,230,.15),rgba(124,58,237,.12));

  /* —— Step 3B-1 图片工具（绘制在图片之上，深浅主题同值） —— */
  /* 裁剪选框亮色描边 */
  --crop-box-border:#ffffff;
  /* 裁剪选框外遮罩（超出部分由容器裁剪） */
  --crop-box-shadow:0 0 0 9999px rgba(0,0,0,.45);
  /* 水印文字填充色 */
  --wm-fill:#ffffff;
  /* 水印描边色 */
  --wm-stroke:rgba(0,0,0,.55);
  /* 修复工具蒙版（白色半透明，绘制在图片上，与主题无关） */
  --fx-mask:rgba(255,255,255,.5);

  /* —— Step 3B-3 证件照换底色（业务数据色：用户可选的目标底色与透明棋盘，与主题无关） —— */
  /* 白底选项（同时用作 AI 蒙版极性反转的 difference 操作色） */
  --idp-white:#ffffff;
  /* 蓝底选项 */
  --idp-blue:#438EDB;
  /* 红底选项 */
  --idp-red:#D9001B;
  /* 自定义颜色默认值 */
  --idp-custom:#1f2937;
  /* 透明棋盘格两色 */
  --idp-check-a:#c9ced9;
  --idp-check-b:#ffffff;

  /* —— Step 3C-1 文本语言（业务数据色，与主题无关） —— */
  /* QR 默认前景色 */
  --qr-fg:#111111;
  /* QR 画布底色（扫码规范要求浅底） */
  --qr-bg:#ffffff;
  /* Step 14 · QR 中心 Logo 的白色圆角底（canvas 绘制色，与主题无关） */
  --qr-logo-bg:#ffffff;
  /* 文本对比：新增行底色 */
  --diff-add-bg:rgba(34,197,94,.13);
  /* 文本对比：删除行底色 */
  --diff-del-bg:rgba(239,68,68,.13);
  /* 正则匹配高亮底色 */
  --mark-bg:rgba(255,196,0,.45);

  /* —— Step 3D-2 便签色板（业务数据色：便签纸颜色，与主题无关，深浅主题同值） —— */
  /* 6 个柔和便签色（索引 0-5，JS 只存索引） */
  --note-c0:#fff6b7;
  --note-c1:#c9f7d4;
  --note-c2:#cfe4ff;
  --note-c3:#ffd9e0;
  --note-c4:#e6dcff;
  --note-c5:#ffe6c7;
  /* 便签纸上统一深色文字（浅色纸面深浅主题均可读） */
  --note-fg:#26261f;

  /* —— Step 3G-4 壁纸遮罩（业务数据色：图片上的黑色遮罩/预览黑底，与主题无关，深浅主题同值） —— */
  /* 每日精选横幅底部渐变遮罩终点 */
  --wp-mask:rgba(0,0,0,.62);
  /* 瀑布流卡片标题渐变遮罩终点 */
  --wp-cap-mask:rgba(0,0,0,.55);
  /* Lightbox 全屏黑底 */
  --wp-lb-bg:rgba(0,0,0,.92);
  /* 图上文字阴影 */
  --wp-shadow:rgba(0,0,0,.5);

  /* —— Step 3H-1 音频剪辑（品牌 1 色低透明衍生色：波形选区高亮，canvas fillStyle 由 JS 读取） —— */
  --ac-hl:rgba(74,90,230,.18);

  /* —— Step 3I-3A PDF 工具箱（绘制在 PDF 页面上的语义色：页面白底与墨色水印，与主题无关，深浅主题同值） —— */
  /* 图片转 PDF 的透明区填白（PDF 纸张底色） */
  --pdf-page-bg:#ffffff;
  /* 水印文字墨色（canvas 绘制后嵌入 PDF） */
  --pdf-wm-ink:#20242e;

  /* —— Step 5C 聚会 3D 骰子（物理骰子语义色：白瓷面 + 深点，与主题无关，深浅主题同值；自 tools.css 硬编码迁移以满足"仅 tokens 可硬编码"红线） —— */
  /* 骰子面渐变起止色 */
  --die-face-a:#ffffff;
  --die-face-b:#e9eef8;
  /* 骰子点 */
  --die-pip:#2f3a52;
  /* 骰面关联色：舞台光晕 / 骰面描边 / 内高光 / 落影（Step 5D 补齐 5C 迁移遗漏） */
  --die-glow:rgba(74,90,230,.06);
  --die-edge:rgba(44,56,88,.13);
  --die-shine:rgba(255,255,255,.9);
  --die-shadow:rgba(34,44,70,.14);

  /* —— Step 12 摇骰子骰盅（物理道具语义色：深色骰盅，与主题无关，深浅主题同值） —— */
  /* 盅身渐变起止（上亮下暗，模拟 3D 圆柱） */
  --cup-hi:#6a7591;
  --cup-lo:#2b3245;
  /* 盅口椭圆（倒扣杯的下缘） */
  --cup-rim-hi:#8b95ae;
  --cup-rim-lo:#3c4359;
  /* 盅身侧面暗部 / 盅口内侧阴影 */
  --cup-shade:rgba(0,0,0,.42);
  --cup-inner:rgba(0,0,0,.6);
  /* 骰盅落影 */
  --cup-shadow:rgba(12,18,34,.32);

  /* —— Step 13 · B6 摇骰子（骰盅 + 蓝色圆托盘 + 白底蓝点骰子） ——
     任务书直接给了这些色值，属于物理道具语义色（与主题无关，深浅主题同值），
     按红线「仅 tokens.css 可硬编码」收口到这里。 */
  /* 盅身渐变（上亮下暗，模拟 3D 圆柱） */
  /* 托盘（蓝色圆盘）：盘面渐变 + 盘沿 + 盘心凹陷 + 落影
     （Step 18：--dc-tray-lo/--dc-tray-rim 同时供 three.js 3D 材质读取） */
  --dc-tray-hi:#5a8fd6;
  --dc-tray-lo:#2b5fa8;
  --dc-tray-edge:#1d4a86;
  --dc-tray-rim:#8fb8e8;
  --dc-tray-well:rgba(10,26,52,.42);
  --dc-tray-shadow:rgba(12,24,48,.28);
  /* 骰子：白瓷面 + 蓝色点（任务书「白色底 + 蓝色圆点」） */
  --dc-die-face-a:#ffffff;
  --dc-die-face-b:#e6ecf7;
  --dc-die-pip:#1a2a5a;
  --dc-die-edge:rgba(44,56,88,.16);
  --dc-die-shine:rgba(255,255,255,.92);
  --dc-die-shadow:rgba(24,40,78,.22);
  /* 骰子在盘面上的高光晕 */
  --dc-die-glow:rgba(90,143,214,.16);

  /* —— Step 5D 元素周期表分类（化学语义色：元素分类的可视化标识，与主题无关，深浅主题同值；自 tools.css 硬编码迁移以满足"仅 tokens 可硬编码"红线） —— */
  --pt-alkali:#ef4444;       /* 碱金属 */
  --pt-alkaline:#f97316;     /* 碱土金属 */
  --pt-transition:#3b82f6;   /* 过渡金属 */
  --pt-post-transition:#64748b; /* 后过渡金属 */
  --pt-metalloid:#14b8a6;    /* 类金属 */
  --pt-nonmetal:#22c55e;     /* 非金属 */
  --pt-halogen:#8b5cf6;      /* 卤素 */
  --pt-noble:#ec4899;        /* 稀有气体 */
  --pt-lanthanide:#eab308;   /* 镧系 */
  --pt-actinide:#ca8a04;     /* 锕系 */
  --pt-unknown:#94a3b8;      /* 未分类 */

  /* —— Step 9 舞台 / 大屏语义色（记分牌全屏、提词器舞台、弹幕舞台：
     深色舞台在深浅主题下恒定，文字/高亮随之固定；自 tools.css 硬编码迁移
     以满足「仅 tokens 可硬编码」红线） —— */
  /* 全屏舞台底色 */
  --stage-bg:#0b0d12;
  /* 弹幕舞台渐变起止色 */
  --stage-bg-2:#10131c;
  --stage-bg-3:#1b2030;
  /* 舞台前景（白字） */
  --stage-fg:#ffffff;
  /* 舞台领先者高亮金 */
  --stage-gold:#ffd43b;
  /* 图片上的半透明黑遮罩（GIF 帧角标等，同 --wp-mask 数值） */
  --img-scrim:rgba(0,0,0,.62);

  /* —— Step 20 · A2 手持弹幕 9 配色（灯牌语义色：深浅主题恒定，
     自定义方案由颜色选择器覆盖 --dm-bg/--dm-fg 两个活动变量） —— */
  --dm-bg-classic:#000000; --dm-fg-classic:#ffffff;   /* 经典（黑底白字） */
  --dm-bg-invert:#ffffff;  --dm-fg-invert:#111111;    /* 反白（白底黑字） */
  --dm-bg-green:#000000;   --dm-fg-green:#39ff14;     /* 荧光绿（黑底绿字） */
  --dm-bg-pink:#000000;    --dm-fg-pink:#ff4fd8;      /* 霓虹粉（黑底粉字） */
  --dm-bg-ice:#000000;     --dm-fg-ice:#5ad7ff;       /* 冰蓝（黑底蓝字） */
  --dm-bg-yellow:#000000;  --dm-fg-yellow:#ffd60a;    /* 亮黄（黑底黄字） */
  --dm-bg-redgold:#c8102e; --dm-fg-redgold:#ffd700;   /* 红金（红底金字） */
  --dm-bg-sea:#0b2545;     --dm-fg-sea:#ffffff;       /* 海蓝（深蓝底白字） */
  /* 自定义（颜色选择器写入这两个活动变量） */
  --dm-bg:#000000;
  --dm-fg:#ffffff;

  /* —— Step 16 · B1 小说阅读器（阅读背景是业务数据色：用户可选纸张色，深浅主题恒定） —— */
  /* 纸白 / 米黄 / 护眼绿 / 夜间黑 四种阅读底色 */
  --rd-paper:#ffffff;
  --rd-sepia:#f5ecd9;
  --rd-green:#cce8cf;
  --rd-night:#15181d;
  /* 前三种底色上的正文墨色（浅底深字） */
  --rd-ink:#22262e;
  /* 夜间底色上的正文色（深底浅字） */
  --rd-ink-night:#b8bfcc;

  /* —— Step 17 · A2 经期记录日历状态色（生理周期语义色：任务书指定
     经期深红 / 排卵日橙红 / 易孕黄 / 安全浅绿，与主题无关，深浅主题同值） —— */
  --pd-period:#d64545;   /* 经期日 深红 */
  --pd-ovu:#e8590c;      /* 排卵日 橙红 */
  --pd-fertile:#d9a514;  /* 易孕期 黄 */
  --pd-safe:#2f9e44;     /* 安全期 浅绿 */
}
[data-theme="dark"]{
  --bg:#0e1118; --card:#161a24; --card2:#1b2030;
  --line:#272e40; --line-soft:rgba(39,46,64,.7);
  /* Step 8 对比度：--fg3 3.75:1 → 5.68:1（#161a24 底） */
  --fg:#e9ecf5; --fg2:#a3acc4; --fg3:#8b93ab;
  --glass-bg:color-mix(in srgb,var(--card) 82%,transparent);
  --glass-border:color-mix(in srgb,#fff 12%,transparent);
  --shadow-sm:0 4px 16px rgba(0,0,0,.35);
  --shadow:0 12px 38px rgba(0,0,0,.5);
  --shadow-float:0 20px 52px rgba(0,0,0,.5);

  --glow1:rgba(74,90,230,.14);
  --glow2:rgba(124,58,237,.11);
  --shadow-inset:inset 0 1px 0 rgba(255,255,255,.10);
  --mask-bg:rgba(0,0,0,.52);
  --mask-bg-soft:rgba(0,0,0,.34);
  --sheet-shadow:0 -8px 60px rgba(0,0,0,.5);
}