/* ==========================================================================
   设计令牌 —— ★★★ H5 唯一真值
   ★ 变量名与取值**逐字对齐参考项目的 H5 预览稿**（paper/route-bg/yellow/ink/
     title/secondary/muted/line/danger/white），另加预览中用到的扩展语义色。
   ★ H5 页面里禁止硬编码色值，一律用 var(--xxx)
   ★★ 注意：h5.css 末尾的 PREVIEW-PORT 块会把下面这组令牌**再声明一遍**，
      而 h5.css 在 tokens.css 之后加载 —— 所以改配色必须**两处一起改**，
      否则改了没反应（参考项目已实测踩过）。

   ★★★ 后台不受本组令牌影响：后台的取值在文件末尾「后台专用」一段，
      并在 admin.css 顶部再次锁定（后台是桌面端，与移动端一致性约束无关）。
   ========================================================================== */
:root{
  --paper:#F8F9FC;
  --route-bg:#F5F6F9;   /* 与卡片白(#fff)对比 1.135:1，卡片边界可见 */
  --yellow:#FFE706;     /* ★ 品牌色 */
  --ink:#000000;
  --title:#26292E;
  --secondary:#999999;
  --muted:#777B83;
  --line:#F0F1F3;
  --danger:#E65445;
  --white:#FFFFFF;

  /* ---------- 预览稿中直接使用、但未列入 :root 的扩展语义色 ---------- */
  --yellow-soft:#FFF6B8;
  --yellow-deep:#F5C400;
  --border:#DFE3E8;
  --fill-light:#FAFBFC;
  --ok:#17A673;
  --ok-soft:#E6F7F1;
  --ok-deep:#0B7A54;
  --warn:#9A5A05;
  --warn-soft:#FFF4E0;
  --warn-line:#F6DDAE;
  --blue:#2E6BE6;
  --blue-soft:#EAF1FE;
  --blue-deep:#1B4CB0;
  --danger-soft:#FDEDEB;
  --danger-deep:#B32E1F;

  /* ---------- 首页 hero 与宫格色板（页面禁止硬编码，故在此集中声明）---------- */
  --hero-1:#3C424B;         /* hero 深色渐变三段 */
  --hero-2:#242830;
  --hero-3:#16191E;
  --hero-text:#1B1F26;      /* hero 上的玻璃底 pill 文字 */
  --glass:rgba(255,255,255,.6);        /* 半透明玻璃底（铃铛所在族） */
  --glass-strong:rgba(255,255,255,.6);
  --glass-stronger:rgba(255,255,255,.8);
  --tone1-bg:#FDF0B0; --tone1-fg:#8A6D00;   /* 黄 */
  --tone2-bg:#E8F0FE; --tone2-fg:#2E6BE6;   /* 蓝 */
  --tone3-bg:#FDE8EF; --tone3-fg:#C2477C;   /* 粉 */
  --tone4-bg:#F0EAFE; --tone4-fg:#6B4FD8;   /* 紫 */
  --tone5-bg:#E4F6EE; --tone5-fg:#178A61;   /* 绿 */
  --tone6-bg:#E4F3F6; --tone6-fg:#1B7C8C;   /* 青 */

  /* ---------- 圆角 / 间距 / 字号 ---------- */
  --radius-card:10px;      /* 卡片 */
  --radius-tag:5px;        /* 标签 */
  --radius-btn:8px;        /* 提示条 / 卡片内小按钮 */
  --radius-pill:24px;      /* 移动端主/次按钮（胶囊） */
  --radius-pill-lg:30px;   /* 移动端输入框 */
  --radius-pill-full:999px;
  --page-padding:15px;     /* 组件**内部**内边距（不要拿它当页面留白） */
  --page-gutter:15px;      /* 页面左右留白 */
  --card-gap:12px;
  --touch-min:44px;        /* 可点区域下限 */
  --btn-h:46px;            /* 移动端按钮高 */
  --font-title:18px;
  --font-card-title:15px;
  --font-body:14px;
  --font-caption:12.5px;
  --font-tiny:11px;
  --font-tag:10px;
}

/* ==========================================================================
   ★★★ 后台专用（桌面端）—— 与上面的 H5 令牌**同名不同值**，因此必须放在后面，
   由 admin.css 顶部再锁定一次（admin.css 只在后台加载，H5 页面不加载它）。
   ★ 改这里只影响后台；改上面只影响 H5。
   ========================================================================== */
:root{
  --color-brand:#4f46e5;
  --color-brand-soft:#eef2ff;
  --color-danger:#ef4444;
  --color-danger-soft:#fef2f2;
  --color-success:#10b981;
  --color-success-soft:#ecfdf5;
  --color-warn:#f59e0b;
  --color-warn-soft:#fffbeb;
  --color-info:#3b82f6;
  --color-info-soft:#eff6ff;

  --color-text-1:#1f2937;
  --color-text-2:#6b7280;
  --color-text-3:#9ca3af;

  --color-bg-page:#f4f6fb;
  --color-bg-card:#ffffff;
  --color-bg-hover:#f9fafb;
  --color-border:#e5e7eb;
  --color-border-strong:#d1d5db;

  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px;

  --admin-radius-card:14px;
  --admin-radius-control:9px;
  --admin-radius-pill:999px;
  --admin-font-title:20px;
  --admin-font-caption:13px;
  --admin-font-tiny:12px;
}