/* ==============================================================
   设计 TOKEN — 单一事实源
   --------------------------------------------------------------
   命名遵循 UI 规范（docs/UI_GUIDELINES.adapted.md），统一使用
   --app-* 前缀。页面与业务样式只允许消费本文件的 token，不得
   再写原始色值、像素字号、裸 box-shadow 或负字距。

   ⚠️ 迁移状态：
      阶段 1 建立 token 层（命名 + 结构与规范一致）。
      阶段 2a 按语义拆分消费方（零视觉变化）。
      阶段 2b 切换颜色取值到规范配色。
      阶段 2c 切换结构类取值（阴影 / 圆角 / 字体栈）并新增图标尺寸档。
      每行末尾的 `阶段2 →` 注释是仍需人工确认的项（当前已全部处理）。

   加载顺序：tokens.css 必须在 style.css 之前引入。
   ============================================================== */

:root {
  /* ============================================================
     1. 画布与表面
     ============================================================ */
  --app-canvas:            #f4f9fc;   /* 阶段2 ✅ 已切换（原 #f8f9fa） */
  --app-canvas-strong:     #edf5fa;   /* 阶段2 ✅ 已切换（原 #f8f9fa） */
  --app-surface:           #ffffff;   /* 阶段2 → #ffffff */
  --app-surface-solid:     #ffffff;   /* 阶段2 → #ffffff */
  --app-surface-soft:      #f7fafc;   /* 阶段2 ✅ 已切换（原 #f1f3f4） */
  --app-surface-dim:       #f7fafc;   /* 阶段2 ✅ 已切换（原 #f8f9fa） */
  --app-inset-bg:          #f1f7fb;   /* 阶段2 ✅ 已切换（原 #f1f3f4） */
  --app-brand-bg:          #eaf5fa;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-surface-info:      #eef7fc;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-surface-warning:   #fff8eb;   /* 阶段2 ✅ 已切换（原 #fef7e0） */
  --app-surface-danger:    #fff1f3;   /* 阶段2 ✅ 已切换（原 #fce8e6） */
  --app-surface-success:   #edf8f3;   /* 阶段2 ✅ 已切换（原 #e6f4ea） */

  /* ============================================================
     2. 文字
     ============================================================ */
  --app-heading:           #102a3b;   /* 阶段2 ✅ 已切换（原 #202124） */
  --app-text:              #263c49;   /* 阶段2 ✅ 已切换（原 #202124） */
  --app-text-subtle:       #425b68;   /* 阶段2 ✅ 已切换（原 #5f6368） */
  --app-text-muted:        #5a707a;   /* 阶段2 ✅ 已切换（原 #9aa0a6） */
  --app-text-faint:        #60747e;   /* 阶段2 ✅ 已切换（原 #9aa0a6） */
  --app-text-disabled:     #9aabb3;   /* 阶段2 ✅ 已切换（原 #9aa0a6） */
  --app-on-action:         #ffffff;   /* 阶段2 → #ffffff */

  /* ============================================================
     3. 品牌色与语义色
     ============================================================ */
  --app-primary:           #258bc4;   /* 阶段2 ✅ 已切换（原 #1a73e8） */
  --app-primary-hover:     #1f77a6;   /* 阶段2 ✅ 已切换（原 #1557b0） */
  --app-primary-active:    #1f75a1;   /* 阶段2 ✅ 已切换（原 #1557b0） */
  --app-primary-soft:      #eaf5fa;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-primary-container: #dfeff7;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-status-primary:    #1c6b94;   /* 阶段3：压深以满足徽标底上的 4.5:1（原 #1f75a1 为 4.33） */

  --app-secondary:         #0b7a75;   /* 阶段3：压深以满足白底 4.5:1（本项目暂无消费方） */
  --app-secondary-hover:   #096b66;   /* 阶段3：同上 */

  --app-success:           #117a52;   /* 阶段2 ✅ 已切换（原 #34a853） */
  --app-warning:           #a65f08;   /* 阶段2 ✅ 已切换（原 #fbbc04） */
  --app-danger:            #c93449;   /* 阶段2 ✅ 已切换（原 #ea4335） */
  --app-info:              #1e729b;   /* 阶段2 ✅ 已切换（原 #4285f4） */

  --app-action-primary:         #1f75a1;  /* 阶段2 ✅ 已切换（原 #1a73e8） */
  --app-action-primary-hover:   #19658b;  /* 阶段2 ✅ 已切换（原 #1557b0） */
  --app-action-primary-active:  #145674;  /* 阶段2 ✅ 已切换（原 #1557b0） */
  --app-action-secondary:       #0b7a75;  /* 阶段3：白字 5.25:1（本项目暂无消费方） */
  --app-action-secondary-hover: #096b66;  /* 阶段3：同上 */
  --app-action-danger:          #bd2f44;  /* 阶段2 ✅ 已切换（原 #ea4335） */
  --app-action-danger-hover:    #a9263a;  /* 阶段2 ✅ 已切换（原 #d93025） */
  --app-action-success:         #14734f;  /* 阶段2 ✅ 已切换（原 #34a853） */
  --app-action-warning:         #965507;  /* 阶段2 ✅ 已切换（原 #fbbc04） */
  --app-action-focus:           #167daf;  /* 阶段2 ✅ 已切换（原 #1a73e8） */
  --app-link:                   #087873;  /* 阶段2 ✅ 已切换（原 #1a73e8） */
  --app-link-hover:             #066b67;  /* 阶段2 ✅ 已切换（原 #1557b0） */

  /* Google 四色（本项目历史遗留，阶段 2 评估后移除） */
  --app-google-blue:       #4285f4;
  --app-google-red:        #ea4335;
  --app-google-yellow:     #fbbc04;
  --app-google-green:      #34a853;

  /* 规范色阶（本项目暂未消费，先按规范值预留） */
  --app-tone-teal:         #087873;
  --app-tone-teal-soft:    #e8f7f5;
  --app-tone-sky:          #1f75a1;
  --app-tone-sky-soft:     #eaf5fa;
  --app-tone-violet:       #6c55a3;
  --app-tone-violet-soft:  #f2eff9;
  --app-tone-amber:        #965507;
  --app-tone-amber-soft:   #fff5e3;
  --app-tone-rose:         #ad2940;
  --app-tone-rose-soft:    #fff0f2;
  --app-tone-emerald:      #14734f;
  --app-tone-emerald-soft: #eaf7f1;
  --app-tone-cyan:         #18758b;
  --app-tone-cyan-soft:    #eaf7fa;
  --app-tone-slate:        #52666f;
  --app-tone-slate-soft:   #eef3f5;

  /* ============================================================
     4. 边框
     ============================================================ */
  --app-border:            #d7e4ea;   /* 阶段2 ✅ 已切换（原 #dadce0） */
  --app-border-soft:       #e7eff3;   /* 阶段2 ✅ 已切换（原 #e8eaed） */
  --app-border-strong:     #9aabb2;   /* 阶段2 ✅ 已切换（原 #bdc1c6） */
  --app-border-brand:      #c7e4f1;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-border-brand-strong: #8fc8e1; /* 阶段2 ✅ 已切换（原 #bdc1c6） */
  --app-success-border:    #a8d8c5;   /* 阶段2 ✅ 已切换（原 #ceead6） */
  --app-warning-border:    #ebcb91;   /* 阶段2 ✅ 已切换（原 #feefc3） */
  --app-danger-border:     #e8aeb7;   /* 阶段2 ✅ 已切换（原 #f6aea9） */
  --app-info-border:       #acd3e5;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */

  /* ============================================================
     5. 表单控件
     ============================================================ */
  /* 遮罩与叠加层（原为 rgba(0,0,0,x) 硬编码，改用带色相的中性遮罩） */
  --app-overlay-hover:         rgba(16, 42, 59, 0.04);
  --app-overlay-light:         rgba(16, 42, 59, 0.32);
  --app-overlay:               rgba(16, 42, 59, 0.45);
  --app-overlay-strong:        rgba(16, 42, 59, 0.55);

  --app-field-bg:              #ffffff;   /* 阶段2 → #ffffff */
  --app-field-border:          #9aabb2;   /* 阶段2 ✅ 已切换（原 #dadce0） */
  --app-field-border-hover:    #71858e;   /* 阶段2 ✅ 已切换（原 #bdc1c6） */
  --app-field-disabled-bg:     #eef3f4;   /* 阶段2 ✅ 已切换（原 #f1f3f4） */
  --app-field-disabled-border: #cbd7db;   /* 阶段2 ✅ 已切换（原 #e8eaed） */
  --app-field-error:           #bd2f44;   /* 阶段2 ✅ 已切换（原 #ea4335） */
  --app-field-error-ring:      0 0 0 3px rgba(189, 47, 68, 0.18);

  --app-choice-surface:        #ffffff;   /* 规范值 */
  --app-choice-border:         #d7e3e7;   /* 阶段2 ✅ 已切换（原 #dadce0） */
  --app-choice-text:           #425962;   /* 阶段2 ✅ 已切换（原 #5f6368） */
  --app-choice-active:         #dfeff7;   /* 阶段2 ✅ 已切换（原 #d2e3fc） */
  --app-choice-active-hover:   #d4e9f4;   /* 阶段2 ✅ 已切换（原 #c6dafc） */
  --app-choice-active-text:    #155f82;   /* 阶段2 ✅ 已切换（原 #1557b0） */

  --app-control-height-sm:   36px;
  --app-control-height:      40px;
  --app-control-height-lg:   44px;
  --app-control-radius:      8px;
  --app-control-radius-icon: 8px;
  --app-control-padding:     16px;
  --app-control-gap:         8px;
  --app-control-font-size:   14px;
  --app-control-font-size-sm: 12px;
  --app-control-disabled-bg:     #eef3f4;  /* 阶段2 ✅ 已切换（原 #f1f3f4） */
  --app-control-disabled-border: #c3d0d5;  /* 阶段2 ✅ 已切换（原 #bdc1c6） */
  --app-control-disabled-text:   #5a707a;  /* 阶段2 ✅ 已切换（原 #9aa0a6） */
  --app-control-transition:      160ms ease;

  /* ============================================================
     6. 阴影与焦点
     规范 3.3：普通表面只使用 1px 边框 + shadow-xs；重阴影仅允许
     弹窗、抽屉和浮层使用 shadow-lg。按钮禁止阴影。
     ============================================================ */
  --app-shadow-xs:        0 1px 2px rgba(16, 42, 59, 0.04);
  --app-shadow-sm:        0 1px 2px rgba(16, 42, 59, 0.06);
  --app-shadow-md:        0 1px 2px rgba(16, 42, 59, 0.08);
  --app-shadow-lg:        0 12px 28px rgba(16, 42, 59, 0.16);
  --app-shadow-accent:    none;
  --app-shadow-primary:   none;
  --app-focus-ring:       0 0 0 3px rgba(22, 125, 175, 0.18);

  /* ============================================================
     7. 圆角
     规范 3.3：卡片、按钮、输入框、弹窗统一 8px；小标签可用 6px；
     999px 仅限头像、徽标、圆形图标按钮和明确的胶囊操作组。
     档位名保留以兼容旧引用，取值已统一收敛到规范的 8px。
     ============================================================ */
  --app-radius-xs:        4px;    /* 进度条 / 缩略图微圆角 */
  --app-radius-tag:       6px;    /* 小标签 */
  --app-radius-sm:        8px;
  --app-radius-md:        8px;
  --app-radius:           8px;    /* 统一档 */
  --app-radius-lg:        8px;
  --app-radius-xl:        8px;
  --app-radius-dialog:    8px;
  --app-radius-pill:      999px;

  /* ============================================================
     8. 间距（4px 节奏，规范值，暂未消费）
     ============================================================ */
  --app-space-half:       2px;
  --app-space-1:          4px;
  --app-space-1-5:        6px;
  --app-space-2:          8px;
  --app-space-2-5:        10px;
  --app-space-3:          12px;
  --app-space-3-5:        14px;
  --app-space-4:          16px;
  --app-space-4-5:        18px;
  --app-space-5:          20px;
  --app-space-6:          24px;
  --app-space-7:          28px;
  --app-space-8:          32px;
  --app-space-10:         40px;
  --app-space-12:         48px;
  --app-space-16:         64px;

  /* ============================================================
     9. 字体与字号
     规范 3.2：使用系统字体栈，不加载远程字体；字号只用 --app-fs-*；
     字距固定为正常值（禁止负字距与非零字距）。
     字号档位：12 / 14 / 16 / 18 / 20 / 24 / 28px。
     ============================================================ */
  --app-font-display:     system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --app-font-body:        system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --app-font-mono:        ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;
  --app-font:             system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;

  --app-fs-micro:         12px;
  --app-fs-caption:       12px;
  --app-fs-xs:            12px;
  --app-fs-sm:            14px;
  --app-fs-base:          14px;
  --app-fs-md:            16px;
  --app-fs-lg:            18px;
  --app-fs-xl:            20px;
  --app-fs-title:         24px;
  --app-fs-display-sm:    24px;
  --app-fs-display:       28px;
  --app-font-weight-regular:  400;
  --app-font-weight-medium:   500;
  --app-font-weight-semibold: 600;
  --app-font-weight-bold:     700;

  /* ============================================================
     9b. 图标与插画尺寸
     规范 3.4：功能图标默认 18px。字号档位只覆盖 12–28px 的**文字**
     尺寸，图标与空状态插画另设本组 token，避免出现 token 外的裸像素。
     ============================================================ */
  --app-icon-xs:          14px;
  --app-icon-sm:          16px;
  --app-icon-md:          18px;   /* 规范默认 */
  --app-icon-lg:          20px;
  --app-icon-xl:          22px;
  --app-icon-2xl:         32px;   /* 品牌 / 页头标识 */
  --app-icon-3xl:         36px;   /* 详情页标识 */
  --app-icon-hero:        56px;   /* 空状态插画 */

  /* ============================================================
     10. 弹窗、布局与层级
     ============================================================ */
  --app-dialog-xs:        380px;
  --app-dialog-sm:        460px;
  --app-dialog-md:        520px;
  --app-dialog-wide:      640px;
  --app-dialog-lg:        760px;
  --app-dialog-xl:        980px;
  --app-page-max:         1440px;
  --app-admin-sidebar:    256px;
  --app-sidebar-collapsed: 80px;
  --app-header-height:    72px;
  --app-z-toast:          3000;

  /* ============================================================
     11. 动效
     规范 6：微交互使用 150–300ms；位移动画只用 transform/opacity。
     时长走 token，这样 prefers-reduced-motion 只需重映射变量，
     不需要用强制优先级标记来覆盖（规范禁止 element-bridge 之外使用）。
     ============================================================ */
  --app-duration-fast:    150ms;
  --app-duration:         200ms;
  --app-duration-slow:    300ms;
  --app-ease:             cubic-bezier(0.2, 0, 0, 1);
  --app-ease-out:         cubic-bezier(0.16, 1, 0.3, 1);
  --app-transition:       var(--app-duration) var(--app-ease);
  --app-transition-slow:  var(--app-duration-slow) var(--app-ease-out);
}

/* ==============================================================
   深色主题 —— 重映射同一批 token
   --------------------------------------------------------------
   规范 3.1：「深色主题通过 :root.dark 重映射同一 token，禁止页面
   单独维护另一套颜色」。本块只覆盖**取值**，不新增 token、不改
   任何消费方；style.css / admin.css 一行都不用动。

   同时匹配 `:root.dark`（规范合同名）与 `[data-theme="dark"]`
   （项目现有 JS 使用的属性，见 js/common.js 的 initTheme / toggleTheme）。

   设计取向：深色背景 + 浅色前景。
   - 所有语义色取**浅色**版本 —— 这样它既能在深底上作正文色（>=4.5:1），
     也能作填充色配深色文字（>=4.5:1），两种用法同时成立。
   - 因此 --app-on-action 在本主题下取**深色**（亮底配深字）。
   - 对比度由 tools/check_contrast.py 逐对验证。
   ============================================================== */
:root.dark,
[data-theme="dark"] {
  /* 1. 画布与表面 */
  --app-canvas:            #0e1620;
  --app-canvas-strong:     #0a1119;
  --app-surface:           #141f2a;
  --app-surface-solid:     #141f2a;
  --app-surface-soft:      #1a2634;
  --app-surface-dim:       #16212c;
  --app-inset-bg:          #111b25;
  --app-brand-bg:          #16323f;
  --app-surface-info:      #12303f;
  --app-surface-warning:   #35270f;
  --app-surface-danger:    #38171e;
  --app-surface-success:   #102c21;

  /* 2. 文字 */
  --app-heading:           #f4fafd;
  --app-text:              #dceaf1;
  --app-text-subtle:       #b8cbd6;
  --app-text-muted:        #9bb0bd;
  --app-text-faint:        #93a8b5;
  --app-text-disabled:     #6c8090;
  --app-on-action:         #0b1520;

  /* 3. 品牌色与语义色 */
  --app-primary:           #7fc9ef;
  --app-primary-hover:     #9ad8f7;
  --app-primary-active:    #6bbde6;
  --app-primary-soft:      #16394a;
  --app-primary-container: #1a4457;
  --app-status-primary:    #8ad3f4;

  --app-secondary:         #5ecfc8;
  --app-secondary-hover:   #79dcd5;

  --app-success:           #6cd3a4;
  --app-warning:           #e8b25c;
  --app-danger:            #f58fa0;
  --app-info:              #8cc7e8;

  --app-action-primary:         #62bde8;
  --app-action-primary-hover:   #7ccdf2;
  --app-action-primary-active:  #4fafdd;
  --app-action-secondary:       #3fb8b1;
  --app-action-secondary-hover: #57c9c2;
  --app-action-danger:          #ec7f92;
  --app-action-danger-hover:    #f393a4;
  --app-action-success:         #5cc79a;
  --app-action-warning:         #dda54e;
  --app-action-focus:           #8fd4f5;
  --app-link:                   #6fd6ce;
  --app-link-hover:             #8fe3dc;

  /* 4. 边框（深色下需更亮才看得见；--app-border 同时用于输入框/搜索框边界，
        按 WCAG 1.4.11 非文字对比度取到 3.2:1） */
  --app-border:            #5d7280;
  --app-border-soft:       #22303c;
  --app-border-strong:     #6b8290;
  --app-border-brand:      #2c5468;
  --app-border-brand-strong: #3d7188;
  --app-success-border:    #2c5a45;
  --app-warning-border:    #5c4720;
  --app-danger-border:     #5c2b34;
  --app-info-border:       #2b5168;

  /* 5. 表单控件 */
  --app-field-bg:              #16222d;
  --app-field-border:          #46596a;
  --app-field-border-hover:    #5d7488;
  --app-field-disabled-bg:     #1a242e;
  --app-field-disabled-border: #33414c;
  --app-field-error:           #f08596;
  --app-field-error-ring:      0 0 0 3px rgba(240, 133, 150, 0.28);

  --app-choice-surface:        #16222d;
  --app-choice-border:         #2c3b48;
  --app-choice-text:           #b8cbd6;
  --app-choice-active:         #1a4457;
  --app-choice-active-hover:   #205168;
  --app-choice-active-text:    #a8dcf5;

  --app-control-disabled-bg:     #1a242e;
  --app-control-disabled-border: #33414c;
  --app-control-disabled-text:   #7f939e;

  /* 6. 阴影与焦点（深色下需更重的黑） */
  --app-shadow-xs:        0 1px 2px rgba(0, 0, 0, 0.35);
  --app-shadow-sm:        0 1px 2px rgba(0, 0, 0, 0.45);
  --app-shadow-md:        0 1px 2px rgba(0, 0, 0, 0.50);
  --app-shadow-lg:        0 12px 28px rgba(0, 0, 0, 0.60);
  --app-shadow-accent:    none;
  --app-focus-ring:       0 0 0 3px rgba(143, 212, 245, 0.30);

  /* 7. 遮罩与叠加层（深色下加深，悬停改为提亮） */
  --app-overlay-hover:     rgba(255, 255, 255, 0.06);
  --app-overlay-light:     rgba(3, 8, 14, 0.55);
  --app-overlay:           rgba(3, 8, 14, 0.65);
  --app-overlay-strong:    rgba(3, 8, 14, 0.75);
}