/* ============================================================
 * HGFAST Design Tokens — Proton-inspired
 * ------------------------------------------------------------
 * 目标路径: /www/wwwroot/demo.hgfastapp.com/public/css/tokens.css
 * 使用: 所有颜色/间距/圆角/阴影/字号必须走 var(--xxx)
 *       0 / 1px border 例外允许硬编码
 *
 * 引用位置:
 *   - public/index.html            <link rel="stylesheet" href="/css/tokens.css?v=1">
 *   - admin_portal 入口模板          同上(同源跨路径可用)
 *
 * 版本: 2026-04-17 rev 2
 * 更新 tokens 时必须 bump 查询串(tokens.css?v=2)
 * ============================================================ */

:root {
  /* 关键: Safari/Chromium 原生控件(input/select/scrollbar)跟随深色 */
  color-scheme: dark;

  /* ============ 品牌色 ============ */
  --proton-purple-100: #F5F4FF;
  --proton-purple-300: #C4B7FF;
  --proton-purple-500: #6D4AFF;  /* 主色 */
  --proton-purple-600: #5C3BDB;  /* hover */
  --proton-purple-700: #4A2EB8;  /* active */
  --proton-purple-900: #1C0F54;

  /* 唯一允许的渐变, 仅用于 dashboard 顶部 hero banner */
  --gradient-hero: linear-gradient(135deg, var(--proton-purple-500), var(--proton-purple-700));

  /* ============ 中性色(深色模式)============ */
  --bg-page:        #12101C;
  --bg-surface:     #1C1A28;
  --bg-elevated:    #25223A;
  --bg-hover:       #2E2B46;
  --bg-input:       #191725;

  --border-subtle:  rgba(255, 255, 255, 0.06);
  --border-default: rgba(255, 255, 255, 0.10);
  --border-strong:  rgba(255, 255, 255, 0.18);
  --border-focus:   var(--proton-purple-500);

  --text-primary:   #EDECF5;     /* 13.8:1 on bg-surface  ✅ AAA */
  --text-secondary: #A8A5BE;     /* 7.2:1  on bg-surface  ✅ AA  */
  --text-tertiary:  #8A87A3;     /* 4.9:1  on bg-surface  ✅ AA  (提亮自 #6F6B87) */
  --text-onpurple:  #FFFFFF;

  /* ============ 状态色(对比度校准过)============ */
  --success: #1EA885;
  --warning: #FFA726;
  --danger:  #E03E5F;    /* 5.2:1 on bg-surface ✅ AA (提亮自 #DB3251) */
  --info:    #3B8DF0;

  /* ============ 圆角 ============ */
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  12px;
  --radius-xl:  16px;
  --radius-full: 9999px;

  /* ============ 间距(4px 基准)============ */
  --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;

  /* ============ 阴影(深色模式调校)============ */
  --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.24);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-lg:    0 8px 32px rgba(0, 0, 0, 0.48);
  --shadow-modal: 0 24px 64px rgba(0, 0, 0, 0.56);
  --shadow-glow-purple: 0 0 0 4px rgba(109, 74, 255, 0.24);  /* focus ring */

  /* ============ 字体 ============ */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont,
               'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
  --font-feature-numeric: 'tnum' 1, 'lnum' 1;

  --fs-xs:   12px;  /* 仅 timestamp / 版权 / 非关键提示, 不用于按钮/表单/金额 */
  --fs-sm:   13px;
  --fs-base: 14px;  /* 基准 */
  --fs-md:   15px;
  --fs-lg:   17px;
  --fs-xl:   20px;
  --fs-2xl:  24px;
  --fs-3xl:  32px;

  --lh-tight:  1.3;
  --lh-normal: 1.5;
  --lh-loose:  1.7;

  /* ============ 过渡 ============ */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:   120ms;
  --dur-normal: 180ms;
  --dur-slow:   280ms;

  /* ============ z-index ============ */
  --z-base:       0;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-header:    300;
  --z-overlay:   900;
  --z-modal:    1000;
  --z-toast:    1100;
  --z-tooltip:  1200;

  /* ============ 触控硬标准 ============ */
  --touch-target: 44px;   /* 全局, 桌面移动统一。Apple HIG 44pt。 */
}

/* ------------------------------------------------------------
 * 设计原则(不是 CSS, 是给 CC 的注释规范)
 *
 * ⚠️ 所有组件类名必须带 `hg-` 前缀, 和项目现有约定对齐
 *    (.hg-sidebar / .hg-nav-item 等已在用)
 * ------------------------------------------------------------
 *
 * 1. 主按钮 .hg-btn-primary
 *      bg: --proton-purple-500
 *      hover: --purple-600
 *      active: --purple-700
 *      color: --text-onpurple
 *      radius: --radius-md
 *      padding: 12px 20px
 *      font: --fs-base / 500
 *      min-height: var(--touch-target)
 *
 * 2. 次按钮 .hg-btn-secondary
 *      bg: transparent
 *      border: 1px solid var(--border-strong)
 *      color: --text-primary
 *      hover bg: --bg-hover
 *      min-height: var(--touch-target)
 *
 * 3. 危险按钮 .hg-btn-danger  (如 sidebar-mgr 重置)
 *      bg: --danger
 *      不允许再用紫色表达危险操作
 *
 * 4. 卡片 .hg-card
 *      bg: --bg-surface
 *      border: 1px solid var(--border-subtle)
 *      radius: --radius-lg
 *      padding: --space-6
 *
 * 5. 弹窗 .hg-modal (overlay 见 primitives.css .hg-modal-overlay)
 *      bg: --bg-elevated
 *      radius: --radius-xl (移动端全屏时去掉)
 *      shadow: --shadow-modal
 *      ≤ 480px: 100dvw × 100dvh, radius 0
 *      z-index: --z-modal
 *
 * 6. 输入框 .hg-input
 *      bg: --bg-input
 *      border: 1px solid var(--border-default)
 *      focus: border --border-focus + box-shadow --shadow-glow-purple
 *      radius: --radius-md
 *      min-height: var(--touch-target)
 *
 * 7. 过渡: 统一 var(--dur-normal) var(--ease-out)
 *      禁止: bounce / scale(1.05) / cubic-bezier 自造
 *
 * 8. 图标: 收敛到 Phosphor duotone (ph-duotone)
 *      禁止混入 Material / Feather / 自画 SVG
 *
 * 9. --fs-xs (12px) 使用限制:
 *      允许: timestamp, 版权, 辅助说明, tooltip
 *      禁止: 按钮文字, 表单 label, 金额数字, 导航项
 *      理由: iPhone SE (360×667) 可读性边界
 *
 * 10. --gradient-hero 使用限制:
 *       全站仅允许用于 dashboard 顶部 hero banner 一处
 *       其它地方出现渐变直接视为违规
 *
 * 11. 字体: Proton 原版用 ABC Arizona (Dinamo, 付费)
 *       禁止下载盗版, 用 Inter 替代。中文回退苹方/雅黑。
 *
 * 12. 触控目标: 全局 ≥ 44×44。
 *       桌面端也要遵守 (iPad + keyboard / Surface 用户)。
 *       不做 "桌面 40 / 移动 44" 的二元标准。
 * ------------------------------------------------------------ */