/* ==========================================================================
   tokens.css —— 门户视觉体系的 Design_Token 单一定义处
   
   本文件是**唯一**允许出现颜色字面量的样式文件：它就是取值的源头。
   app.css 只允许通过 var() 消费这里的令牌，不得再出现 hex / rgb() / hsl()
   字面量（由 Property 3 持续断言）。

   分组顺序：颜色（中性 / 品牌 / 语义 / 语义别名）→ 字体 → 字号 → 行高
   → 间距 → 圆角 → 阴影 → 控件尺寸 → 焦点 → 布局 → 断点镜像 → 动效。

   对比度数值由
   WCAG 2.1 sRGB 相对亮度公式实测得出，改色前请先跑对比度校验。
   本文件不引用任何外部资源（无 @import、无外部字体 URL）。
   ========================================================================== */

:root {
  /* ------------------------------------------------------------------------
     颜色 · 中性阶梯
     括号内为在白底（--n-0）上的实测对比度。
     ------------------------------------------------------------------------ */
  --n-0: #ffffff;    /* 卡片表面 */
  --n-25: #f7f9fb;   /* 页面背景 */
  --n-50: #eef2f7;   /* 表头底、次级填充 */
  --n-100: #e2e8f0;  /* 装饰性分隔线（1.23，仅装饰） */
  --n-200: #cbd5e1;  /* 装饰性分隔线（强）（1.48，仅装饰） */
  --n-300: #94a3b8;  /* 占位符文本（2.56，仅非必要提示） */
  --n-400: #64748b;  /* 辅助文本、控件边框（4.76 ✓；在 --n-25 上 4.51 ✓，为下限） */
  --n-500: #475569;  /* 次级正文、表头文本（7.58 ✓） */
  --n-700: #1e293b;  /* 正文（14.63 ✓） */
  --n-800: #0f172a;  /* 标题（17.85 ✓） */

  /* 取色推导 1 · 控件边框为何取 --n-400 而不是更浅的灰
     控件边框属于 WCAG 1.4.11「用户界面组件」，要求与相邻色 ≥ 3:1。
     实测：--n-200 在白底仅 1.48、--n-300 仅 2.56，两者均不达标；
     --n-400 为 4.76 ✓，因此控件边框统一取 --n-400（见 --border）。
     --n-100 / --n-200 由此降级为**仅用于装饰性分隔线**——装饰性图形不承载
     信息、不构成界面组件，1.4.11 对该场景不适用。
     请勿为了「看起来轻一点」把 --border 改浅，那会直接违反 1.4.11。 */

  /* 取色推导 2 · 表头文本为何取 --n-500 而不是 --n-400
     表头底为 --n-50，实测 --n-400 在其上仅 4.23，不足正文所需的 4.5；
     --n-500 在 --n-50 上为 6.74 ✓，故表头文本统一取 --n-500。 */

  /* ------------------------------------------------------------------------
     颜色 · 品牌阶梯
     ------------------------------------------------------------------------ */
  --brand-50: #eff4ff;   /* 选中底、用户气泡（承载 --brand-600 文字，6.08 ✓） */
  --brand-100: #dbe6fe;  /* 浅边框 */
  --brand-500: #3b6fe0;  /* 悬停过渡中间色 */
  --brand-600: #1d4ed8;  /* 主按钮、链接、焦点环基色（白字 6.70 ✓） */
  --brand-700: #1a3fa8;  /* 主按钮悬停（白字 9.05 ✓） */
  --brand-800: #1e3a8a;  /* 页头底、登录品牌区渐变起点（白字 10.36 ✓） */

  /* ------------------------------------------------------------------------
     颜色 · 语义色（每色一个 600 前景 + 一个 50 底）
     括号内依次为「600 在白底」/「600 在自身 50 底」的实测对比度。
     ------------------------------------------------------------------------ */
  --success-600: #047857;  /* 5.48 ✓ / 5.21 ✓ */
  --success-50: #ecfdf5;
  --warning-600: #b45309;  /* 5.02 ✓ / 4.84 ✓ */
  --warning-50: #fffbeb;
  --danger-600: #b91c1c;   /* 6.47 ✓ / 5.91 ✓ */
  --danger-50: #fef2f2;
  --info-600: #0369a1;     /* 5.93 ✓ / 5.45 ✓ */
  --info-50: #eff6ff;
  --accent-600: #0e7490;   /* 数据/阶段强调：5.36 ✓ / 5.15 ✓（已实测达标，未调整取值） */
  --accent-50: #ecfeff;

  /* ------------------------------------------------------------------------
     颜色 · 语义别名
     组件表（app.css）只引用这一层，不直接依赖数字阶梯：
     换肤或调色时改这里即可，组件规则无需改动。
     ------------------------------------------------------------------------ */
  --surface: var(--n-0);                /* 卡片、面板表面 */
  --surface-sunken: var(--n-25);        /* 页面背景 */
  --surface-muted: var(--n-50);         /* 表头底、次级填充 */
  --surface-inverse: var(--brand-800);  /* 页头底 */

  --text: var(--n-700);                 /* 正文 */
  --text-secondary: var(--n-500);       /* 次级正文、表头文本 */
  --text-muted: var(--n-400);           /* 辅助文本（下限见推导 1） */
  --text-placeholder: var(--n-300);      /* 占位符，仅非必要提示 */
  --text-heading: var(--n-800);         /* 标题 */
  --text-on-brand: var(--n-0);          /* 品牌底上的文字 */

  --border: var(--n-400);               /* 控件边框，1.4.11 要求 ≥ 3:1 */
  --border-subtle: var(--n-200);        /* 装饰性分隔线（强），仅装饰 */
  --border-faint: var(--n-100);         /* 装饰性分隔线，仅装饰 */
  --border-brand: var(--brand-100);     /* 品牌浅边框 */

  --link: var(--brand-600);
  --link-hover: var(--brand-700);
  --brand-surface: var(--brand-50);     /* 选中底、用户气泡底 */
  --focus-base: var(--brand-600);       /* 焦点环与图标基色（白底 6.70 ✓） */

  /* ------------------------------------------------------------------------
     字体族（系统字体优先，含简体中文回退链；不加载外部字体）
     ------------------------------------------------------------------------ */
  --font-sans: -apple-system, "Segoe UI", "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", Roboto, sans-serif;

  /* ------------------------------------------------------------------------
     字号阶梯
     ------------------------------------------------------------------------ */
  --fs-xs: 0.8125rem;   /* 13px 辅助说明 */
  --fs-sm: 0.875rem;    /* 14px 次级正文、表格 */
  --fs-base: 0.9375rem; /* 15px 正文 */
  --fs-lg: 1.125rem;    /* 18px 卡片标题 */
  --fs-xl: 1.375rem;    /* 22px 页面标题 */
  --fs-2xl: 1.75rem;    /* 28px 品牌区大标题 */

  /* ------------------------------------------------------------------------
     行高（中文正文取 1.65，兼顾密度与可读性）
     ------------------------------------------------------------------------ */
  --lh-tight: 1.3;
  --lh-base: 1.65;
  --lh-loose: 1.8;

  /* ------------------------------------------------------------------------
     间距阶梯（基数 4；仅这些取值可用于 margin / padding / gap）
     ------------------------------------------------------------------------ */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ------------------------------------------------------------------------
     圆角
     ------------------------------------------------------------------------ */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
  --r-full: 999px;

  /* ------------------------------------------------------------------------
     阴影（基色取 --n-800 的 RGB，低透明度以免在浅底上显脏）
     ------------------------------------------------------------------------ */
  --sh-1: 0 1px 2px rgba(15, 23, 42, .06);
  --sh-2: 0 6px 16px rgba(15, 23, 42, .10);

  /* ------------------------------------------------------------------------
     控件尺寸与触控下限
     --ctrl-h-lg 与 --tap-min 均不得小于 44px（触控目标要求）。
     ------------------------------------------------------------------------ */
  --ctrl-h-sm: 32px;
  --ctrl-h-md: 40px;
  --ctrl-h-lg: 44px;
  --tap-min: 44px;

  /* ------------------------------------------------------------------------
     焦点环（--brand-600 的 RGB + 30% 透明度；任何 outline: none 必须配它）
     ------------------------------------------------------------------------ */
  --focus-ring: 0 0 0 3px rgba(29, 78, 216, .30);

  /* ------------------------------------------------------------------------
     布局尺寸
     ------------------------------------------------------------------------ */
  --layout-max: 1080px;
  --gutter: 24px;
  --gutter-narrow: 16px;

  /* ------------------------------------------------------------------------
     断点镜像值
     CSS 自定义属性不能用于 @media 条件（`@media (max-width: var(--bp-md))`
     无效），因此 app.css 第 5 段以字面量书写断点；这里声明同值令牌供组件内
     calc() 等场景引用，两处一致性由测试断言。
     ------------------------------------------------------------------------ */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;

  /* ------------------------------------------------------------------------
     动效时长（prefers-reduced-motion 下由 app.css 第 6 段整体停用）
     ------------------------------------------------------------------------ */
  --dur-fast: 120ms;
  --dur-base: 200ms;
}

/* ==========================================================================
   深色模式 · 预留覆盖入口（本轮 webportal-design-system 不实现配色）

   本轮仅预留入口，不填任何取值：现在启用会把配色维护面翻倍，且不在本轮范围。
   未来实现深色模式时，只需在下面这个块内**重定义语义别名令牌**
   （--surface / --surface-sunken / --surface-muted / --text / --text-secondary
   / --text-muted / --text-heading / --border / --border-subtle / --link …），
   并配合 <html data-theme="dark"> 生效即可，**不必改动 app.css**——
   组件表只消费别名层，这正是别名层存在的理由。
   重定义后须重新跑对比度校验：深色底上的阈值与浅色底并不自动等价。
   ========================================================================== */
[data-theme="dark"] {
}