/* ================================================================
 * 全局主题变量（Design Token）—— 颜色
 * ----------------------------------------------------------------
 * 规则：样式类型禁止混用。即使颜色值相同,也必须按语义独立定义,
 *       业务代码只允许引用本文件中的语义变量,严禁直接写色值。
 * 分组：品牌色 / 文字色 / 背景色 / 按钮色 / 线条色 / 状态色 / 阴影色
 * ================================================================ */
page {
  /* 品牌色 —— 主色调,用于链接、强调、聚焦等品牌表达 */
  --color-primary: #000000;            /* 主色 */
  --color-primary-disabled: #cccccc;   /* 主色禁用态 */

  /* 文字色 —— 仅用于 color 属性,禁止用于按钮/背景 */
  --color-text: #333333;               /* 一级正文 */
  --color-text-secondary: #999999;     /* 二级辅助文字 */
  --color-text-placeholder: #cccccc;   /* 占位文字 */
  --color-text-inverse: #ffffff;       /* 反白文字(深底上的白字) */
  --color-text-disabled: #cccccc;      /* 禁用文字 */

  /* 背景色 —— 仅用于容器 background,禁止用于按钮 */
  --color-bg: #f5f5f5;                 /* 页面底色 */
  --color-bg-card: #ffffff;            /* 卡片/容器底色 */
  --color-bg-elevated: #ffffff;        /* 浮层/弹框底色 */
  --color-bg-mask: rgba(0, 0, 0, 0.5); /* 弹框蒙层(action-sheet/confirm) */

  /* 按钮色 —— 仅用于按钮组件,与文字色/背景色完全解耦 */
  --color-btn-primary: #000000;        /* 主按钮底色 */
  --color-btn-primary-text: #ffffff;   /* 主按钮文字 */
  --color-btn-default: #ffffff;        /* 默认按钮底色 */
  --color-btn-default-text: #333333;   /* 默认按钮文字 */
  --color-btn-default-border: #e5e5e5; /* 默认按钮边框 */
  --color-btn-disabled: #cccccc;       /* 禁用按钮底色 */
  --color-btn-disabled-text: #ffffff;  /* 禁用按钮文字 */
  --color-btn-danger: #fa5151;         /* 危险按钮底色(删除等) */
  --color-btn-danger-text: #ffffff;    /* 危险按钮文字 */
  --color-btn-link: #000000;           /* 链接按钮文字色 */

  /* 线条色 —— 仅用于 border,禁止用于文字/背景 */
  --color-border: #e5e5e5;             /* 常规边框 */
  --color-border-light: #f0f0f0;       /* 浅边框 */
  --color-divider: #eeeeee;            /* 分割线 */

  /* 状态色 —— 成功/警告/危险/信息提示 */
  --color-success: #07c160;            /* 成功(微信绿) */
  --color-warning: #ff9500;            /* 警告(橙) */
  --color-danger: #fa5151;             /* 危险/错误(红) */
  --color-info: #1677ff;               /* 信息(蓝) */

  /* 阴影色 —— 仅用于 box-shadow */
  --color-shadow: rgba(0, 0, 0, 0.08);      /* 常规阴影 */
  --color-shadow-card: rgba(0, 0, 0, 0.04); /* 卡片浅阴影 */
}