/* ═══════════════════════════════════════════════════════════════════════════
   TON Pay Design System v2.0 — 完整设计规范
   ===========================================================================
   文件结构:
     Layer 1: Primitive Tokens    原始值 (HSL颜色 / 间距 / 字号 / 圆角 / 阴影 / 动效)
     Layer 2: Semantic Tokens     语义别名 (bg / text / border / accent 等用途映射)
     Layer 3: Component Tokens    组件专用 (button / card / modal / toast / tab 等)
     兼容别名:                      旧代码过渡期使用

   ═══════════════════════════════════════════════════════════════════════════
   强制规则
   ═══════════════════════════════════════════════════════════════════════════
     1. 禁止在组件样式中使用裸色值，必须引用 var(--token)
     2. 所有颜色定义为 HSL 三元组，支持透明度: hsl(var(--xxx) / 0.12)
     3. 间距基于 4px 基数: 1=4px, 2=8px, 3=12px, 4=16px, 5=20px...
     4. 字体层级: xs(10) → sm(12) → base(14) → lg(16) → xl(20) → 2xl(24) → 3xl(32) → 4xl(48)
     5. 主题切换只需更改 HSL 三元组，无需改动组件层

   ═══════════════════════════════════════════════════════════════════════════
   间距标尺 (4px 基数)
   ═══════════════════════════════════════════════════════════════════════════
     --space-0  = 0        --space-5  = 20px     --space-10 = 40px
     --space-1  = 4px      --space-6  = 24px     --space-12 = 48px
     --space-2  = 8px      --space-7  = 28px     --space-16 = 64px
     --space-3  = 12px     --space-8  = 32px
     --space-4  = 16px
   用法: padding: var(--space-4) var(--space-6);  (16px 24px)

   ═══════════════════════════════════════════════════════════════════════════
   排版层级
   ═══════════════════════════════════════════════════════════════════════════
    H1 Hero    → font-size: var(--font-size-4xl)  + weight: extrabold  (欢迎页)
    H2 Page    → font-size: var(--font-size-xl)   + weight: bold       (页标题)
    H3 Card    → font-size: var(--font-size-lg)   + weight: semibold   (卡片标题)
    Body       → font-size: var(--font-size-base) + weight: normal     (正文)
    Caption    → font-size: var(--font-size-sm)   + weight: normal     (辅助文字)
    Label      → font-size: var(--font-size-xs)   + weight: medium     (标签)
    Overline   → font-size: 9px + weight: normal + letter-spacing-wide (卡片分类)

   ═══════════════════════════════════════════════════════════════════════════
   颜色使用规则
   ═══════════════════════════════════════════════════════════════════════════
    背景层级     bg-app (最深) → bg-surface → bg-surface-raised (最浅)
    文字层级     text-primary (主要内容) → text-secondary (辅助) → text-tertiary (禁用/占位)
    强调色       color-accent (绿色, 主CTA) / color-gold (金色, 收银台专用)
    错误色       color-error (红色, 危险操作)
    链接色       color-link (蓝色, 外部链接)
    透明度体系   -muted(8%) → -subtle(6%) → -soft(12%) → 实色
    边框         border-default → border-subtle → border-accent(强调) → border-error(错误)

   ═══════════════════════════════════════════════════════════════════════════
   组件状态规范
   ═══════════════════════════════════════════════════════════════════════════

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Button: Primary   │ 主 CTA 按钮 (连接钱包 / 创建 / 支付)                        │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --btn-primary-bg      text: --btn-primary-text         │
   │ Hover             │ bg: --btn-primary-bg-hover  opacity: 0.9                   │
   │ Active (按下)     │ bg: --btn-primary-bg-active                                 │
   │ Disabled          │ bg: --btn-primary-bg-disabled  text: --text-tertiary       │
   │                   │ cursor: not-allowed  opacity: 0.5                          │
   │ Loading           │ 显示 spinner + 隐藏文字                                    │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Button: Secondary │ 次要操作 (取消 / 返回 / 复制链接)                           │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: transparent  text: --text-tertiary  border: --border   │
   │ Hover/Active      │ bg: --bg-surface-raised  text: --text-primary             │
   │ Disabled          │ opacity: 0.4  cursor: not-allowed                         │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Button: Danger    │ 危险操作 (删除 / 断开钱包)                                  │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: transparent  text: --color-error  border: --border-error│
   │ Hover/Active      │ bg: --color-error-muted  border-color: --color-error       │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Button: Ghost     │ 图标按钮 (复制 / 分享 / 删除 小图标)                        │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: transparent  text: --text-tertiary  border: transparent│
   │ Hover/Active      │ bg: --bg-surface-raised  text: --text-primary             │
   │                   │ border: --border-default                                  │
   │ Copy Active       │ text: --color-accent  border-color: --color-accent        │
   │ Delete Active     │ text: --color-error   border-color: --color-error         │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Card              │ 信息容器 (商品卡片 / 订单卡片 / 设置卡片)                    │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --card-bg  border: --card-border  radius: --card-radius│
   │ Hover (可点击)    │ 保持默认样貌 (无 hover 效果)                                │
   │ Empty             │ empty-state 样式: 居中图标 + 提示文字                       │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Input             │ 表单输入框                                                 │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --input-bg  border: --input-border  text: --text      │
   │ Focus             │ border: --input-border-focus  box-shadow: --shadow-glow   │
   │ Disabled          │ opacity: 0.4  cursor: not-allowed                         │
   │ Error             │ border-color: --color-error                              │
   │ Placeholder       │ color: --input-placeholder                               │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Tab Item          │ 底部导航项 (商品/订单/余额/设置)                             │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ color: --tab-item-text                                     │
   │ Active            │ color: --tab-item-text-active (= --color-accent)          │
   │ Hover             │ 同 Default (无额外 hover 态)                              │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Toast             │ 全局提示                                                   │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Hidden            │ transform: translateY(120px)                              │
   │ Visible           │ transform: translateY(0)  transition: 300ms ease-out      │
   │ Success           │ border-color: --color-accent                              │
   │ Error             │ border-color: --color-error                               │
   │ Auto-dismiss      │ 2.5s 后自动隐藏                                           │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Modal             │ 弹窗容器 (创建商品 / 提现 / 编辑)                            │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Overlay           │ bg: --bg-overlay  backdrop-filter: blur(8px)              │
   │ Panel             │ bg: --modal-bg  border: --modal-border                    │
   │ Animation         │ modalUp 250ms ease-out (从下方滑入)                        │
   │ Close Button      │ 圆形 ghost button, 右上角绝对定位                          │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Emoji Picker      │ Emoji 选择网格 (8列)                                       │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --emoji-option-bg  border: --emoji-option-border      │
   │ Hover/Active      │ border: --emoji-option-border-active  bg: --surface-raised│
   │ Selected          │ border: --color-accent  bg: --color-accent-soft           │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Checkout Card     │ 收银台支付卡片 (消费者视角)                                  │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --checkout-bg  border: --checkout-border              │
   │ Pay Button        │ bg: --color-gold  text: --text-inverse                    │
   │ Pay Button Hover  │ opacity: 0.9                                              │
   │ Pay Button Load   │ 显示 spinner, 隐藏文字                                    │
   │ Pay Button Done   │ bg: --color-accent (绿色, 支付成功)                        │
   │ Share Section     │ 支付成功后展开, 淡入动画                                   │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Dashboard Card    │ 余额仪表盘卡片 (今日/本月/累计收入)                          │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --card-dash-bg  border: --card-dash-border            │
   │ Wide variant      │ grid-column: 1/-1, flexbox 横向布局                        │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Connect Prompt    │ 未连接钱包时的引导卡片                                      │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: --connect-prompt-bg  border: --border 居中布局         │
   │ CTA Button        │ 使用 btn-primary token                                    │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ┌──────────────────┬───────────────────────────────────────────────────────────┐
   │ Lang Button       │ 语言切换按钮                                               │
   ├──────────────────┼───────────────────────────────────────────────────────────┤
   │ Default           │ bg: transparent  border: --border  color: --text-tertiary  │
   │ Active            │ border-color: --color-gold  color: --color-gold           │
   └──────────────────┴───────────────────────────────────────────────────────────┘

   ═══════════════════════════════════════════════════════════════════════════
   使用示例
   ═══════════════════════════════════════════════════════════════════════════

   添加新组件:
     1. 在 Layer 3 定义组件 Token: --new-comp-bg, --new-comp-text 等
     2. 所有颜色值必须引用 Layer 2 Semantic Token 或 HSL 变量
     3. 在 style.css 中引用: background: var(--new-comp-bg)
     4. 禁止写法: background: #1a1a2e;  (裸色值)
     5. 正确写法: background: var(--new-comp-bg);

   主题切换示例 (添加浅色主题):
     @media (prefers-color-scheme: light) {
       :root {
         --hue-bg: 210; --sat-bg: 20%; --lit-bg: 98%;
         --hue-surface: 210; --sat-surface: 20%; --lit-surface: 95%;
         ... 仅改 HSL 三元组, 所有组件自动适配 ...
       }
     }

   响应式断点:
     ≤420px    小屏手机 (标题缩小, 弹窗 padding 减少)
     440px+    标准布局起效 (body padding 归零)
     480px+    弹窗垂直居中而非底部弹出

   ═══════════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 1: PRIMITIVE TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 颜色 (HSL 三元组，支持 hsl(var(--xxx) / opacity) 语法) ─── */
  --hue-bg: 222;
  --sat-bg: 84%;
  --lit-bg: 5%;
  --hue-surface: 225;
  --sat-surface: 50%;
  --lit-surface: 8%;
  --hue-surface-raised: 222;
  --sat-surface-raised: 40%;
  --lit-surface-raised: 11%;
  --hue-border: 217;
  --sat-border: 33%;
  --lit-border: 17%;
  --hue-border-subtle: 218;
  --sat-border-subtle: 28%;
  --lit-border-subtle: 14%;

  --hue-text-primary: 210;
  --sat-text-primary: 40%;
  --lit-text-primary: 98%;
  --hue-text-secondary: 213;
  --sat-text-secondary: 20%;
  --lit-text-secondary: 66%;
  --hue-text-tertiary: 214;
  --sat-text-tertiary: 16%;
  --lit-text-tertiary: 50%;

  --hue-accent: 142;
  --sat-accent: 71%;
  --lit-accent: 45%;
  --hue-accent-hover: 142;
  --sat-accent-hover: 76%;
  --lit-accent-hover: 36%;
  --hue-accent-active: 142;
  --sat-accent-active: 76%;
  --lit-accent-active: 30%;

  --hue-error: 0;
  --sat-error: 92%;
  --lit-error: 71%;
  --hue-error-hover: 0;
  --sat-error-hover: 85%;
  --lit-error-hover: 63%;

  --hue-link: 201;
  --sat-link: 100%;
  --lit-link: 46%;

  --hue-overlay: 0;
  --sat-overlay: 0%;
  --lit-overlay: 0%;

  /* ─── 间距 (4px 基数) ─── */
  --space-0: 0;
  --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;

  /* ─── 字号 ─── */
  --font-size-xs: 10px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;
  --font-size-4xl: 48px;

  /* ─── 字重 ─── */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;

  /* ─── 行高 ─── */
  --line-height-tight: 1.1;
  --line-height-snug: 1.35;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.7;

  /* ─── 字间距 ─── */
  --letter-spacing-tight: -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-wider: 0.08em;
  --letter-spacing-widest: 0.15em;

  /* ─── 圆角 ─── */
  --radius-none: 0;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ─── 阴影 ─── */
  --shadow-none: none;
  --shadow-sm: 0 1px 2px hsl(0 0% 0% / 0.3);
  --shadow-md: 0 4px 12px hsl(0 0% 0% / 0.4);
  --shadow-lg: 0 8px 30px hsl(0 0% 0% / 0.5);
  --shadow-glow-accent: 0 0 0 1px hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent));
  --shadow-glow-error: 0 0 0 1px hsl(var(--hue-error) var(--sat-error) var(--lit-error));

  /* ─── 动效时长 ─── */
  --duration-instant: 0ms;
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-modal: 250ms;

  /* ─── 动效曲线 ─── */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ─── Z-Index 层级 ─── */
  --z-base: 0;
  --z-dropdown: 10;
  --z-tab-bar: 50;
  --z-modal-overlay: 100;
  --z-toast: 200;
  --z-debug: 99999;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 2: SEMANTIC TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 背景 ─── */
  --bg-app:             hsl(var(--hue-bg) var(--sat-bg) var(--lit-bg));
  --bg-surface:         hsl(var(--hue-surface) var(--sat-surface) var(--lit-surface));
  --bg-surface-raised:  hsl(var(--hue-surface-raised) var(--sat-surface-raised) var(--lit-surface-raised));
  --bg-overlay:         hsl(var(--hue-overlay) var(--sat-overlay) var(--lit-overlay) / 0.6);
  --bg-tab-bar:         hsl(222 84% 4% / 0.88);

  /* ─── 文字 ─── */
  --text-primary:       hsl(var(--hue-text-primary) var(--sat-text-primary) var(--lit-text-primary));
  --text-secondary:     hsl(var(--hue-text-secondary) var(--sat-text-secondary) var(--lit-text-secondary));
  --text-tertiary:      hsl(var(--hue-text-tertiary) var(--sat-text-tertiary) var(--lit-text-tertiary));
  --text-inverse:       hsl(var(--hue-bg) var(--sat-bg) var(--lit-bg));
  --text-on-accent:     hsl(var(--hue-bg) var(--sat-bg) var(--lit-bg));

  /* ─── 边框 ─── */
  --border-default:     hsl(var(--hue-border) var(--sat-border) var(--lit-border));
  --border-subtle:      hsl(var(--hue-border-subtle) var(--sat-border-subtle) var(--lit-border-subtle));
  --border-accent:      hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent) / 0.3);
  --border-error:       hsl(var(--hue-error) var(--sat-error) var(--lit-error) / 0.3);

  /* ─── 强调色 ─── */
  --color-accent:       hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent));
  --color-accent-hover: hsl(var(--hue-accent-hover) var(--sat-accent-hover) var(--lit-accent-hover));
  --color-accent-active:hsl(var(--hue-accent-active) var(--sat-accent-active) var(--lit-accent-active));
  --color-accent-muted: hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent) / 0.08);
  --color-accent-soft:  hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent) / 0.12);
  --color-accent-subtle:hsl(var(--hue-accent) var(--sat-accent) var(--lit-accent) / 0.06);

  /* ─── 错误色 ─── */
  --color-error:        hsl(var(--hue-error) var(--sat-error) var(--lit-error));
  --color-error-hover:  hsl(var(--hue-error-hover) var(--sat-error-hover) var(--lit-error-hover));
  --color-error-muted:  hsl(var(--hue-error) var(--sat-error) var(--lit-error) / 0.08);
  --color-error-soft:   hsl(var(--hue-error) var(--sat-error) var(--lit-error) / 0.12);

  /* ─── 链接色 ─── */
  --color-link:         hsl(var(--hue-link) var(--sat-link) var(--lit-link));

  /* ─── 排版 ─── */
  --font-family-sans:   -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-heading:-apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-family-mono:   'SF Mono', 'Fira Code', 'Fira Mono', monospace;

  /* ─── 安全区域 ─── */
  --safe-top:           var(--tg-safe-top, 0px);
  --safe-bottom:        calc(var(--tg-safe-bottom, 0px) + env(safe-area-inset-bottom, 0px));

  /* ─── 布局 ─── */
  --tab-bar-height:     64px;
  --app-max-width:      440px;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LAYER 3: COMPONENT TOKENS
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Button: Primary ─── */
  --btn-primary-bg:             var(--color-accent);
  --btn-primary-text:           var(--text-on-accent);
  --btn-primary-bg-hover:       var(--color-accent-hover);
  --btn-primary-bg-active:      var(--color-accent-active);
  --btn-primary-bg-disabled:    var(--bg-surface-raised);
  --btn-primary-text-disabled:  var(--text-tertiary);
  --btn-primary-radius:         var(--radius-lg);
  --btn-primary-py:             var(--space-4);
  --btn-primary-px:             var(--space-8);
  --btn-primary-font-size:      var(--font-size-base);
  --btn-primary-font-weight:    var(--font-weight-semibold);

  /* ─── Button: Secondary ─── */
  --btn-secondary-bg:           transparent;
  --btn-secondary-text:         var(--text-tertiary);
  --btn-secondary-border:       var(--border-default);
  --btn-secondary-bg-hover:     hsl(var(--hue-surface-raised) var(--sat-surface-raised) var(--lit-surface-raised));
  --btn-secondary-text-hover:   var(--text-primary);
  --btn-secondary-radius:       var(--radius-xs);
  --btn-secondary-py:           var(--space-2);
  --btn-secondary-px:           var(--space-3);
  --btn-secondary-font-size:    var(--font-size-sm);
  --btn-secondary-font-weight:  var(--font-weight-medium);

  /* ─── Button: Danger ─── */
  --btn-danger-bg:              transparent;
  --btn-danger-text:            var(--color-error);
  --btn-danger-border:          var(--border-error);
  --btn-danger-bg-active:       var(--color-error-muted);
  --btn-danger-radius:          var(--radius-xs);
  --btn-danger-py:              var(--space-2);
  --btn-danger-px:              var(--space-3);
  --btn-danger-font-size:       var(--font-size-sm);
  --btn-danger-font-weight:     var(--font-weight-medium);

  /* ─── Button: Ghost (icon-only) ─── */
  --btn-ghost-size:             32px;
  --btn-ghost-text:             var(--text-tertiary);
  --btn-ghost-bg-hover:         var(--bg-surface-raised);
  --btn-ghost-text-hover:       var(--text-primary);
  --btn-ghost-radius:           var(--radius-xs);

  /* ─── Card ─── */
  --card-bg:                    var(--bg-surface);
  --card-border:                var(--border-default);
  --card-radius:                var(--radius-lg);
  --card-padding:               var(--space-4);
  --card-gap:                   var(--space-2);

  /* ─── Card: Dashboard ─── */
  --card-dash-bg:               var(--bg-surface);
  --card-dash-border:           var(--border-default);
  --card-dash-radius:           var(--radius-xs);
  --card-dash-padding:          var(--space-3);

  /* ─── Card: Settings ─── */
  --card-settings-bg:           var(--bg-surface);
  --card-settings-border:       var(--border-default);
  --card-settings-radius:       var(--radius-none);
  --card-settings-gap:          var(--space-3);

  /* ─── Input ─── */
  --input-bg:                   var(--bg-surface-raised);
  --input-border:               var(--border-default);
  --input-border-focus:         var(--color-accent);
  --input-text:                 var(--text-primary);
  --input-placeholder:          var(--text-tertiary);
  --input-radius:               var(--radius-xs);
  --input-py:                   11px;
  --input-px:                   13px;
  --input-font-size:            var(--font-size-base);

  /* ─── Tab Bar ─── */
  --tab-bg:                     var(--bg-tab-bar);
  --tab-border:                 hsl(var(--hue-border) var(--sat-border) var(--lit-border) / 0.5);
  --tab-item-text:              var(--text-tertiary);
  --tab-item-text-active:       var(--color-accent);
  --tab-item-icon-size:         18px;
  --tab-item-label-size:        var(--font-size-xs);
  --tab-height:                 var(--tab-bar-height);

  /* ─── Modal ─── */
  --modal-bg:                   var(--bg-surface);
  --modal-border:               var(--border-default);
  --modal-radius:               var(--radius-lg);
  --modal-padding:              var(--space-6);
  --modal-animation:            modalUp var(--duration-modal) var(--ease-out);

  /* ─── Toast ─── */
  --toast-bg:                   var(--bg-surface);
  --toast-border:               var(--border-default);
  --toast-radius:               var(--radius-xs);
  --toast-padding-y:            11px;
  --toast-padding-x:            18px;
  --toast-font-size:            13px;
  --toast-animation:            var(--duration-slow) var(--ease-out);

  /* ─── Emoji Picker ─── */
  --emoji-grid-cols:            8;
  --emoji-option-bg:            var(--bg-surface-raised);
  --emoji-option-border:        var(--border-default);
  --emoji-option-border-active: var(--color-accent);
  --emoji-option-bg-active:     var(--color-accent-soft);
  --emoji-option-radius:        var(--radius-sm);
  --emoji-option-font-size:     18px;

  /* ─── Checkout Card ─── */
  --checkout-bg:                var(--bg-surface);
  --checkout-border:            var(--border-default);
  --checkout-radius:            var(--radius-none);
  --checkout-padding-y:         var(--space-8);
  --checkout-padding-x:         var(--space-6);
  --checkout-max-width:         380px;
  --checkout-amount-size:       var(--font-size-4xl);
  --checkout-amount-weight:     var(--font-weight-bold);

  /* ─── Welcome / Hero ─── */
  --hero-title-size:            var(--font-size-4xl);
  --hero-title-weight:          var(--font-weight-extrabold);
  --hero-desc-size:             var(--font-size-base);
  --hero-description-size:      var(--font-size-base);

  /* ─── Connect Prompt ─── */
  --connect-prompt-bg:          var(--bg-surface);
  --connect-prompt-border:      var(--border-default);
  --connect-prompt-radius:      var(--radius-sm);
  --connect-prompt-padding:     var(--space-8) var(--space-6);

  /* ─── Empty State ─── */
  --empty-icon-size:            56px;
  --empty-title-size:           var(--font-size-lg);
  --empty-text-size:            var(--font-size-sm);

  /* ─── Badge / Tag ─── */
  --badge-bg:                   hsl(var(--hue-text-primary) var(--sat-text-primary) var(--lit-text-primary) / 0.04);
  --badge-text:                 var(--text-tertiary);
  --badge-radius:               var(--radius-full);
  --badge-font-size:            var(--font-size-xs);

  /* ─── Divider ─── */
  --divider-color:              var(--border-default);

  /* ─── Link Row (Settings) ─── */
  --link-row-hover:             hsl(var(--hue-text-primary) var(--sat-text-primary) var(--lit-text-primary) / 0.02);
}

/* ═══════════════════════════════════════════════════════════════════════════
   向后兼容别名
   旧代码/JS 可继续使用旧变量名，所有别名指向新三层架构
   新开发请直接使用 Layer 2 (Semantic) 和 Layer 3 (Component) token
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:             var(--bg-app);
  --surface:        var(--bg-surface);
  --surface2:       var(--bg-surface-raised);
  --surface3:       var(--bg-surface-raised);
  --border:         var(--border-default);
  --text:           var(--text-primary);
  --text2:          var(--text-secondary);
  --text3:          var(--text-tertiary);
  --accent:         var(--color-accent);
  --accent2:        var(--color-accent-hover);
  --success:        var(--color-accent);
  --error:          var(--color-error);
  --radius:         var(--radius-lg);
  --radius-sm:      var(--radius-sm);
  --radius-xs:      var(--radius-xs);
  --radius-full:    var(--radius-full);
  --font:           var(--font-family-sans);
  --font-heading:   var(--font-family-heading);

  --tg-bg:          var(--bg-app);
  --tg-text:        var(--text-primary);

  --color-bg:       var(--bg-app);
  --color-surface:  var(--bg-surface);
  --color-surface2: var(--bg-surface-raised);
  --color-border:   var(--border-default);
  --color-text:     var(--text-primary);
  --color-text2:    var(--text-secondary);
  --color-text3:    var(--text-tertiary);
  --color-green:    var(--color-accent);
  --color-success:  var(--color-accent);
  --color-error:    var(--color-error);

  --color-gold:     hsl(38 92% 50%);

  --tg-safe-top:    0px;
  --tg-safe-bottom: 100px;
  --tab-height:     var(--tab-bar-height);
}