/**
 * 设计令牌（开发清单 2.1–2.4，设计需求文档 2.1–2.3）。
 *
 * 颜色与圆角**从设计稿变量取值**（get_variables 读出的 31 个色 + 5 档圆角），
 * 间距 / 阴影 / 字号按设计文档 2.2 / 2.3 的**规范梯度**建，
 * 不从稿件逐处量取 —— 稿件里那几类没建变量，实际值已经发散
 * （padding 14/15/22、gap 7/9/11、阴影 blur 六档），照抄等于把发散带进代码。
 * 这是设计文档 A-3 / C-2 明确交代的处理方式。
 *
 * 本期不做深色模式，但组件里仍然一律用 var(--color-*)，不硬编码色值（2.4）。
 * 理由不是为了以后换肤，而是：硬编码的色值没法审查。一个 #002CB0 散在
 * 三十个文件里，改品牌色要靠全局替换，替换漏掉的地方要靠肉眼发现。
 */

:root {
  /* ---------- 品牌色 ---------- */
  /* primary-500 是品牌主色 #002CB0（客户已定） */
  --color-primary-50: #ebf0ff;
  --color-primary-100: #d1ddff;
  --color-primary-200: #adc2ff;
  --color-primary-300: #7a9cff;
  --color-primary-400: #3f6cf3;
  --color-primary-500: #002cb0;
  --color-primary-600: #002594;
  --color-primary-700: #001d75;
  --color-primary-800: #00175c;
  --color-primary-900: #001142;

  /* ---------- 中性色 ---------- */
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f7f8fa;
  --color-neutral-100: #f0f1f5;
  --color-neutral-200: #e5e6eb;
  --color-neutral-300: #c9cdd4;
  --color-neutral-400: #a9aeb8;
  --color-neutral-500: #86909c;
  --color-neutral-700: #4e5969;
  --color-neutral-900: #1d2129;

  /* ---------- 语义色 ---------- */
  /* 每个语义色配一个 -bg 浅底，用于 Tag / Alert 这类need底色的场景 */
  --color-success-500: #00b42a;
  --color-success-bg: #e8ffea;
  --color-warning-500: #ff7d00;
  --color-warning-700: #a34700;   /* 浅底上的警告文字，500 在 warning-bg 上对比度不够 */
  --color-warning-bg: #fff7e8;
  --color-danger-500: #f53f3f;
  --color-danger-bg: #ffece8;
  --color-info-500: #165dff;
  --color-info-bg: #e8f3ff;

  /* VIP 标记专用金色。不并入语义色：它标的是人的身份而非状态 */
  --color-vip-500: #d4a017;
  --color-vip-bg: #fff9e6;

  /* ---------- 语义别名 ---------- */
  /* 组件里优先用这一组：写 --color-text-primary 比写 --color-neutral-900
     更能表达意图，将来调整层级也只改这里 */
  --color-text-primary: var(--color-neutral-900);
  --color-text-secondary: var(--color-neutral-700);
  --color-text-tertiary: var(--color-neutral-500);
  --color-text-disabled: var(--color-neutral-400);
  --color-text-inverse: var(--color-neutral-0);

  --color-bg-page: var(--color-neutral-50);
  --color-bg-card: var(--color-neutral-0);
  --color-bg-hover: var(--color-neutral-50);
  --color-bg-active: var(--color-primary-50);
  --color-bg-disabled: var(--color-neutral-100);

  /**
   * 表格行专用的两档底色。
   *
   * 不能复用 --color-bg-hover：它等于 neutral-50，而斑马纹的浅行也是 neutral-50
   * —— 于是偶数行 hover 时颜色一点不变，鼠标划过去像是表格没响应。
   * 表格是这个后台最主要的交互面（参会人、订单、导入记录都是长表），
   * hover 失效等于丢掉"当前在看哪一行"的唯一提示。
   *
   * 所以行 hover 单独往下压一档到 neutral-100，斑马纹留在 neutral-50。
   * 侧栏、分页器那些地方继续用 --color-bg-hover，它们底下没有斑马纹，不冲突。
   */
  --color-bg-row-stripe: var(--color-neutral-50);
  --color-bg-row-hover: var(--color-neutral-100);
  --color-bg-row-active: var(--color-primary-50);
  --color-bg-row-active-hover: var(--color-primary-100);

  --color-border: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: var(--color-primary-500);

  /* ---------- 半透明层 ---------- */
  /**
   * 这几个必须写 rgba() 字面量：CSS 里没法给一个颜色变量单独换 alpha
   * （color-mix() 能做，但微信内置浏览器的 WebView 版本不保准，
   * 这个项目 H5 端主要在微信里打开）。
   *
   * 所以它们收在 tokens.css 里而不是散在组件里 —— 「不硬编码色值」这条
   * 要求的实质是「色值只有一个来源」，不是「一个 rgba 都不许出现」。
   */
  --color-scrim: rgba(29, 33, 41, 0.45);        /* neutral-900 45%，弹窗遮罩 */

  /* primary-500 8% 的淡洗色。座位工作台的「拖放落点光晕」与小地图可视区填充都是这层：
     品牌色极淡地铺一片示意「这里」，不与座位本身的主色抢眼。同 scrim 走单一 alpha */
  --color-primary-wash: rgba(0, 44, 176, 0.08);

  /* 深色侧栏上的白色层级。同一套梯度，改要一起改 */
  --color-on-dark-1: rgba(255, 255, 255, 0.72); /* 常态文字 */
  --color-on-dark-2: rgba(255, 255, 255, 0.6);  /* 常态图标 */
  --color-on-dark-3: rgba(255, 255, 255, 0.4);  /* 分组标题、版本号 */
  --color-on-dark-hover: rgba(255, 255, 255, 0.08);
  --color-on-dark-line: rgba(255, 255, 255, 0.08);
  --color-on-dark-line-head: rgba(255, 255, 255, 0.12);
  /* 深底上的「填充块」：批量操作条（primary-900）里的按钮底与竖分隔。
     和上面的 line/hover 同源，只是更实一档，当作可点的块而非描边 */
  --color-on-dark-fill: rgba(255, 255, 255, 0.12);
  --color-on-dark-fill-hover: rgba(255, 255, 255, 0.18);
  /* 深底上的删除文字。danger-500(#f53f3f) 压在 primary-900 上偏暗、糊进底色，
     这里提亮到浅珊瑚，保留「危险」语义又读得清 */
  --color-on-dark-danger: #ffb0a8;
  /* 深底上的警告文字。同理 warning-500(#ff7d00) 压在深底上偏暗、糊进底色，
     提亮到浅橙。座位工作台悬浮 tooltip 的「与 X 占用同一座位」用它 */
  --color-on-dark-warning: #ff9a66;

  /* JSON 查看器语法高亮（PC-08 测试连接弹窗的「原始响应」，压在 primary-900 深底）。
     同 on-dark 一族、集中在这里改。默认标点/结构用 on-dark-1；
     脱敏后的手机号 / 身份证复用 on-dark-danger（浅珊瑚，天然把「这里被打码了」标出来）*/
  --color-json-key: #8fc7ff;   /* 顶层键名，蓝 */
  --color-json-num: #a8e6c1;   /* 数值 total/page，绿 */
  --color-json-str: #ffd9a8;   /* 订单号等字符串值，橙 */

  /* ---------- 字体 ---------- */
  /* 设计稿里是 Noto Sans SC / Inter，那是 Pencil 画布的替身字体
     （PingFang 是 Apple 系统字体，画布渲染不了）。上线要写的是这两个栈，
     不要照抄稿件 —— 设计文档 2.2 有明确交代 */
  --font-body: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;
  --font-num: "SF Pro Display", Inter, system-ui, sans-serif;

  /* ---------- 字号 / 行高（H5 阶梯，设计文档 2.2）---------- */
  --text-display-xl: 72px;
  --text-display-xl-lh: 80px;
  --text-display-l: 48px;
  --text-display-l-lh: 56px;
  --text-title-1: 24px;
  --text-title-1-lh: 32px;
  --text-title-2: 18px;
  --text-title-2-lh: 26px;
  --text-body-1: 16px;
  --text-body-1-lh: 24px;
  --text-body-2: 14px;
  --text-body-2-lh: 22px;
  --text-caption: 12px;
  --text-caption-lh: 18px;

  /* PC 阶梯与 H5 不同档（设计文档 2.2）：PC 信息密度高，标题不需要那么大 */
  --text-pc-title-1: 20px;
  --text-pc-title-1-lh: 28px;
  --text-pc-title-2: 16px;
  --text-pc-title-2-lh: 24px;

  /* 字重。**display 档一律 600 不用 700**（开发清单 2.3）：
     PingFang 只有 400/500/600，700 在 macOS 回退到 600、Windows 雅黑走合成
     加粗，两端粗细不一致，桌号巨字边缘还会发毛 */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---------- 间距（8 栅格，设计文档 2.3）---------- */
  /**
   * **两份文档在这里不一致，取的是 10 档这一版。**
   *   开发需求文档 1.3：只列 8 个值（4/8/12/16/24/32/48/64），无 20、无 40
   *   设计需求文档 2.3：10 个值，含 20 与 40
   * 取 10 档是因为开发文档自己就自相矛盾 —— 同一份文档第 155 行的小屏降档
   * 规格写着「卡片内距 20→16」，而它的梯度表里根本没有 20。
   * 稿件里 Topbar 内距也是 20。删掉 20 就没法表达这两处。
   */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---------- 圆角 ---------- */
  --radius-s: 4px;      /* 标签、输入框 */
  --radius-m: 8px;      /* 按钮、小卡 */
  --radius-l: 12px;     /* 卡片、弹窗 */
  --radius-xl: 20px;    /* H5 大卡 */
  --radius-full: 999px; /* 头像、胶囊标签 */

  /* ---------- 阴影（三档，不是稿件里的六档）---------- */
  /* 稿件用了 blur 12/16/24/28/32/36 六档，是发散不是规范。
     设计文档 2.3 明确：开发按三档实现即可 */
  --shadow-1: 0 1px 2px rgba(29, 33, 41, 0.04);   /* 卡片静置 */
  --shadow-2: 0 4px 12px rgba(29, 33, 41, 0.08);  /* 悬浮卡、下拉 */
  --shadow-3: 0 8px 32px rgba(29, 33, 41, 0.12);  /* 弹窗、抽屉 */

  /**
   * 开发需求文档 1.3 用的是另一套名字与数值（--shadow-card / -float / -modal，
   * 且色是纯黑而非 neutral-900）。两份都是「3 档」，只是命名与取值不同。
   * 取设计文档那一版的数值（阴影用中性色而不是纯黑，压在彩色卡上不会发脏），
   * 但把开发文档的名字留成别名 —— 那份文档是前端交付基线，
   * 有人照着它写 var(--shadow-card) 时不该拿到空值然后静默地没有阴影。
   */
  --shadow-card: var(--shadow-1);
  --shadow-float: var(--shadow-2);
  --shadow-modal: var(--shadow-3);

  /* 聚焦外发光。单独列出来是因为它不是「阴影」而是可达性要件：
     键盘用户全靠这个知道焦点在哪，不能为了好看去掉 */
  --focus-ring: 0 0 0 3px var(--color-primary-50);

  /* ---------- 层级 ---------- */
  /* 集中管理，避免出现 z-index: 9999 这种赌博式取值 */
  --z-dropdown: 1000;
  --z-sticky: 1010;
  --z-drawer: 1020;
  --z-modal: 1030;
  --z-toast: 1040;

  /* ---------- 动效 ---------- */
  --duration-fast: 120ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ---------- 布局 ---------- */
  --sidebar-width: 224px;         /* 展开态 */
  --sidebar-width-collapsed: 64px; /* 折叠态，1280 以下用（清单 2.6）*/
  --topbar-height: 56px;
  /* 内容区最大宽度:超宽屏铺满而非居中。用户反馈居中后两侧灰色 body
     底色露出,列表页看着「背景没铺齐」。改成 100% 让内容全屏铺,
     dashboard 一类紧凑布局如果拉得太散,单页自行加 max-width 限制。 */
  --content-max-width: 100%;

  /* H5 安全区：底部固定按钮必须预留，否则在 iPhone 上会被 Home 条压住 */
  --safe-top: 44px;
  --safe-bottom: 34px;

  /* ---------- H5 结果页专用尺寸 ---------- */
  /* 单独建这四个是为了让 375×667 小屏降档变成「改四个变量」而不是
     「翻遍结果页改四处写死值」（降档规格见设计文档 9.1 / 清单 2.8） */
  --h5-table-no: var(--text-display-xl);  /* 桌号巨字 72 */
  --h5-seat-no: var(--text-display-l);     /* 座位号 48 */
  --h5-card-pad: var(--space-5);           /* 卡片内距 20 */
  --h5-btn-h: 46px;                        /* 主操作按钮高 */
}

/**
 * 数字等宽。
 *
 * 用在座位号、桌号、统计数字、表格里的数量列。不加的话比例字体下
 * 「11」比「88」明显窄，一列数字左右参差；分页器上翻页时数字宽度跳动。
 */
.tabular {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}