/* ============================================================
   设计令牌：颜色 / 圆角 / 阴影 / 底纹 / 安全区 / 字号
   深色模式与主题皮肤只覆盖这里的变量，组件样式零改动。
   ============================================================ */

/* ============================================================
   THEME TOKENS — 一处改色，整站换肤（简约·墨色中性默认）
   ============================================================ */
:root {
  /* ---- 页面与表面（蓝色科技感底） ---- */
  --page-bg: #e7efff;              /* 页面底色（浅蓝科技底） */
  --surface-card: #ffffff;         /* 卡片/面板/输入框/按钮的主背景 */
  --surface-nested: #f0f6ff;       /* 嵌套区域：图标瓦底、ghost 按钮、hero 底、日历格底 */

  /* ---- 边框 ---- */
  --border: #cdd9f0;               /* 常规边框：卡片、分隔线 */
  --border-input: #aebfe2;         /* 强边框：输入框、按钮、chip、勾选框、grab */

  /* ---- 文本层级 ---- */
  --text: #13213e;                 /* 主文本：深海军蓝 */
  --text-secondary: #4a5e83;       /* 次文本：标签、副标题、描述、字段 label */
  --text-tertiary: #7e90b3;        /* 弱文本：图标色、导航字、占位、星期行、空态 */

  /* ---- 主色（按钮/选中/强调）—— 科技蓝 ---- */
  --accent: #2563eb;               /* 主色：按钮、选中态、section 竖条、focus 边框 */
  --accent-muted: #dbeafe;         /* 主色浅底：focus ring 光晕、step 按钮 active 底 */
  --on-accent: #ffffff;            /* 主色上的前景文字 */

  /* ---- 模块色（5 色轮转，活泼有活力） ---- */
  --module-1: #10b981;             /* 翠绿 — 打卡/完成/收入 */
  --module-2: #3b82f6;             /* 亮蓝 — 阅读/focus/趋势线 */
  --module-3: #f59e0b;             /* 琥珀 — 运动/连续天数/星标 */
  --module-4: #ef4444;             /* 珊瑚红 — 记账/占比图 */
  --module-5: #8b5cf6;             /* 紫罗兰 — 笔记/日记 */

  /* ---- 危险色 ---- */
  --danger: #ef4444;               /* 删除/危险操作 */
  --danger-muted: #fee2e2;         /* 危险浅底：删除 hover、P0 标签 */

  /* ---- 抽屉（深海蓝科技面板） ---- */
  --drawer-bg: #0f1b35;            /* 抽屉底色 */
  --drawer-bg-top: #1e3a5f;        /* 抽屉渐变上色 */
  --drawer-text: #e0ecff;          /* 抽屉前景文字 */
  --drawer-text-mute: rgba(224,236,255,.55);  /* 抽屉次要文字/图标 */
  --drawer-hover: rgba(224,236,255,.1);       /* 抽屉悬停底 */
  --drawer-active: rgba(59,130,246,.22);      /* 抽屉选中底 */

  /* ---- 背景图 ----
     注意：自定义属性里的 url() 由浏览器按「声明它的那份样式表」的路径解析（不是相对 HTML）。
     本文件位于 src/css/，故必须写 ../../workbench-assets/… 才能命中项目根的 workbench-assets/；
     少写或写错层级都会被解析成 src/css/workbench-assets/… 而 404，首页 hero 图随即空白。 */
  --greet-image: url("../../workbench-assets/greet-banner.jpg");  /* 首页 hero 背景图 */
  --page-texture: none;                            /* 页面纹理叠加（none 或 url(...)），不影响内容层 */

  /* ---- 圆角 ---- */
  --radius-control: 8px;           /* 勾选框、步进按钮、日历格 */
  --radius-tile: 12px;             /* 图标瓦、输入框、按钮、chip、cal-nav */
  --radius-card: 18px;             /* 卡片、面板、hero、空态图标 */
  --radius-sheet: 24px;            /* 底部弹窗顶部圆角 */

  /* ---- 阴影 ---- */
  --shadow-card: 0 1px 2px rgba(19,33,62,.05), 0 6px 20px rgba(37,99,235,.09);   /* 卡片/面板 */
  --shadow-overlay: 0 12px 32px rgba(19,33,62,.18);                             /* 弹窗/toast/悬浮按钮 */

  /* ---- 底纹与遮罩（P3-2 抽成变量，深色模式整体替换） ---- */
  --page-grad-a: #eaf2ff;            /* 页面渐变上色 */
  --page-grad-b: #e4ecff;            /* 页面渐变下色 */
  --glow: rgba(59,130,246,.18);      /* 顶部光晕 */
  --grid-line: rgba(59,130,246,.07); /* 科技网格线 */
  --nav-bg: rgba(255,255,255,.92);   /* 底部导航栏底 */
  --scrim: rgba(19,33,62,.44);       /* 抽屉 / 弹窗遮罩 */

  /* ---- 字体与布局 ---- */
  --font: -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --nav-h: 62px;                   /* 底部导航栏高度 */
  /* ---- P3-5 安全区（刘海屏 / 手势条 / 圆角屏） ---- */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --kb: 0px;                       /* 软键盘占位高度，由 JS 写入 */
  --fs: 1;                         /* P3-6 字号缩放系数，所有 font-size 都乘它 */
}

/* P3-6 三档字号：只放大缩小文字，不动留白与图标，保证布局稳当 */
html[data-fs="small"] { --fs: .9; }
html[data-fs="mid"]   { --fs: 1; }
html[data-fs="large"] { --fs: 1.16; }

/* ============================================================
   P3-2 深色模式：<html data-theme="dark"> 时整体替换颜色令牌。
   JS 会把「跟随系统」解析成 dark / light 后写到 data-theme。
   ============================================================ */
html[data-theme="dark"] {
  --page-bg: #0a121f;
  --surface-card: #131e30;
  --surface-nested: #1a2a42;

  --border: #24344c;
  --border-input: #35496a;

  --text: #e7eefb;
  --text-secondary: #9cb0cf;
  --text-tertiary: #6b7fa3;

  --accent: #4d8dff;
  --accent-muted: #17294a;
  --on-accent: #ffffff;

  --module-1: #34d399;
  --module-2: #60a5fa;
  --module-3: #fbbf24;
  --module-4: #f87171;
  --module-5: #a78bfa;

  --danger: #f87171;
  --danger-muted: #3a1b21;

  --drawer-bg: #070d18;
  --drawer-bg-top: #132239;
  --drawer-text: #e2ecff;
  --drawer-text-mute: rgba(226,236,255,.5);
  --drawer-hover: rgba(226,236,255,.08);
  --drawer-active: rgba(77,141,255,.26);

  --page-grad-a: #0d1728;
  --page-grad-b: #070d18;
  --glow: rgba(77,141,255,.16);
  --grid-line: rgba(120,170,255,.055);
  --nav-bg: rgba(15,24,39,.92);
  --scrim: rgba(2,6,14,.66);

  --shadow-card: 0 1px 2px rgba(0,0,0,.45), 0 8px 22px rgba(0,0,0,.35);
  --shadow-overlay: 0 14px 34px rgba(0,0,0,.55);
}
/* 深色下把首页插画压得更暗，保证叠字可读 */
html[data-theme="dark"] .greet::before {
  background: linear-gradient(100deg, var(--surface-nested) 38%,
    color-mix(in srgb, var(--surface-nested) 86%, transparent) 58%,
    color-mix(in srgb, var(--surface-nested) 44%, transparent) 100%); }

/* ---- 主题色皮肤（只换 accent，模块色保持 5 色轮转） ---- */
html[data-skin="coral"] { --accent: #ea580c; --accent-muted: #ffedd5; }
html[data-skin="green"] { --accent: #0f9d75; --accent-muted: #d7f5ec; }
html[data-theme="dark"][data-skin="coral"] { --accent: #ff8a4c; --accent-muted: #3a2113; }
html[data-theme="dark"][data-skin="green"] { --accent: #34d399; --accent-muted: #10322a; }