/* ============================================================================
   cyi001.cn 设计令牌层（Design Tokens）  v1.0  2026-09-30
   ----------------------------------------------------------------------------
   用途：全站唯一的色彩/间距/字号/圆角/阴影/层级真源。
   原则：① 取值全部来自线上实测（不改观感，只做统一）；② 语义优先，业务代码只
         用 --color-* / --space-* 等语义令牌，不直接写色值；③ 新增页面禁止硬编码。
   实测依据（2026-09-30，收钱三页 index.html / pay-return.html / user-dashboard-v3.html
             + home-base.css / home-overrides.css / mobile-fix.css / app-dashboard-v3.css）：
     · 硬编码颜色 697 处，去重 190 个色值，rgba 去重 218 个  → 无令牌层
     · 出现最多的 5 个： #ffffff×69  #6b7280×38  #9ca3af×38  #ec4899×26  #f59e0b×23
   本文件只声明 CSS 变量（无选择器规则），引入后**视觉零变化**。
   ========================================================================== */

@layer tokens {
  :root {
    /* ===== 1. 原始色板（Primitive）—— 数值取自线上实测，勿随意改 ===== */

    /* 品牌粉（站内第一主色：#ec4899 出现 26 次、#db2777 11 次、#f472b6 13 次、#f9a8d4 15 次） */
    --pink-50:  #fff5f7;
    --pink-100: #fdf2f8;
    --pink-150: #fce7f3;
    --pink-200: #fbcfe8;
    --pink-300: #f9a8d4;
    --pink-400: #f472b6;
    --pink-500: #ec4899;
    --pink-600: #db2777;
    --pink-700: #be185d;
    --pink-800: #9d174d;

    /* 强调橙（第二主色：#f59e0b 23 次、#fcd34d 7 次、#fef3c7 8 次、#d97706 7 次、#b45309 5 次、#92400e 8 次） */
    --amber-100: #fef3c7;
    --amber-200: #fde68a;
    --amber-300: #fcd34d;
    --amber-400: #fbbf24;
    --amber-500: #f59e0b;
    --amber-600: #d97706;
    --amber-700: #b45309;
    --amber-800: #92400e;

    /* 中性灰（文本与边框主力：#6b7280 / #9ca3af 各 38 次，为全站使用最多的一对） */
    --gray-50:  #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-400: #9ca3af;
    --gray-500: #6b7280;
    --gray-600: #4b5563;
    --gray-700: #374151;
    --gray-800: #1f2937;
    --gray-900: #111827;

    /* 冷灰蓝（用户后台/表格用：#e8edf7 12 次、#56617a 8 次、#64708a 8 次、#3a4358 7 次） */
    --slate-100: #e8edf7;
    --slate-200: #bcc6d8;
    --slate-300: #8b93a5;
    --slate-400: #64708a;
    --slate-500: #56617a;
    --slate-600: #3f495e;
    --slate-700: #3a4358;
    --slate-800: #2a3040;
    --slate-900: #1e2b4f;

    /* 深色 UI（暗色导航/日志面板：#161b22 8 次、#30363d 7 次、#21262d、#0d1117） */
    --dark-900: #0d1117;
    --dark-800: #161b22;
    --dark-700: #21262d;
    --dark-600: #30363d;
    --dark-text: #e6edf3;
    --dark-text-dim: #8b949e;

    /* 状态色（实测出现：成功 #10b981 / #059669 / #d1fae5 / #a7f3d0；危险 #ef4444 / #dc2626 / #b91c1c；信息 #2563eb / #dbeafe / #0ea5e9 / #38bdf8） */
    --green-100: #d1fae5;
    --green-200: #a7f3d0;
    --green-500: #10b981;
    --green-600: #059669;
    --green-700: #157347;
    --wechat-green: #07c160;      /* 微信原生绿，仅用于微信渠道标识 */
    --wechat-green-strong: #06ab56;

    --red-50:   #fff1f2;
    --red-100:  #fecdd3;
    --red-400:  #f87171;
    --red-500:  #ef4444;
    --red-600:  #dc2626;
    --red-700:  #b91c1c;

    --orange-400: #fb923c;
    --orange-500: #f97316;
    --orange-600: #ea580c;

    --blue-100: #dbeafe;
    --blue-300: #93c5fd;
    --blue-400: #60a5fa;
    --blue-500: #2563eb;
    --blue-600: #1d4ed8;
    --sky-400:  #38bdf8;
    --sky-500:  #0ea5e9;
    --sky-700:  #0369a1;
    --sky-900:  #0c4a6e;

    --violet-100: #ede9fe;
    --violet-400: #a78bfa;
    --violet-700: #6d28d9;

    /* --- 1b. 实测补充色（v1.1，2026-09-30 令牌化扫描时按出现次数 ≥2 收集）---
       说明：这些是收钱三页里重复出现、但尚未归入上方色阶的过渡色。
       命名保留可读语义；后续做视觉整理时再逐步合并到主色阶。括号内为实测出现次数。 */
    --gray-450:      #999999;   /* 5  */
    --gray-950:      #111111;   /* 3  */
    --slate-850:     #1e293b;   /* 4  */
    --slate-750:     #343c4e;   /* 2  */
    --slate-650:     #465066;   /* 2  */
    --slate-ink:     #4b556b;   /* 3  */
    --slate-mist:    #8a7f90;   /* 3  */
    --slate-haze:    #cbd5e1;   /* 2  */
    --slate-150:     #f1f5f9;   /* 2  */
    --slate-975:     #0f172a;   /* 2  */
    --pink-tint-1:   #fff0f7;   /* 4  */
    --pink-tint-2:   #fff8fc;   /* 2  */
    --pink-tint-3:   #fff4fa;   /* 2  */
    --pink-soft-2:   #ffe3f1;   /* 2  */
    --pink-soft-3:   #ffe4ec;   /* 2  */
    --pink-mid:      #a54679;   /* 3  */
    --pink-350:      #ff7eb6;   /* 2  */
    --pink-450:      #ff5ea3;   /* 2  */
    --pink-pale-2:   #f0c6e0;   /* 3  */
    --rose-800:      #831843;   /* 2  */
    --blue-50:       #eff6ff;   /* 2  */
    --blue-550:      #1677ff;   /* 2  */
    --blue-450:      #3b9bff;   /* 2  */
    --sky-50:        #f0f9ff;   /* 3  */
    --sky-100:       #e0f2fe;   /* 2  */
    --sky-800:       #0b4f75;   /* 2  */
    --sky-tint:      #ecf8ff;   /* 2  */
    --sky-tint-2:    #e3f3ff;   /* 2  */
    --sky-tint-3:    #f8fdff;   /* 2  */
    --tint-cool-1:   #f8fbff;   /* 4  */
    --tint-cool-2:   #f8fafc;   /* 2  */
    --tint-neutral:  #f5f5f5;   /* 2  */
    --tint-warm:     #fafafa;   /* 2  */
    --orange-550:    #ff9e2c;   /* 2  */
    --orange-350:    #ffb84d;   /* 2  */
    --orange-red:    #f5542e;   /* 2  */
    --amber-900:     #7c2d12;   /* 3  */

    /* ===== 2. 语义令牌（Semantic）—— 业务代码只用这一层 ===== */

    /* 文字 */
    --color-text:         var(--gray-800);   /* 正文主色 #1f2937 */
    --color-text-strong:  var(--gray-900);   /* 标题/数字 #111827 */
    --color-text-muted:   var(--gray-500);   /* 次要说明 #6b7280 */
    --color-text-faint:   var(--gray-400);   /* 占位/极弱 #9ca3af */
    --color-text-inverse: #ffffff;
    --color-link:         var(--pink-600);

    /* 背景与容器 */
    --color-bg:        #ffffff;
    --color-bg-page:   var(--gray-50);
    --color-bg-soft:   var(--gray-100);
    --color-surface:   #ffffff;
    --color-surface-2: var(--gray-50);

    /* 边框与分割 */
    --color-border:        var(--gray-200);   /* #e5e7eb，全站最常见边框 */
    --color-border-strong: var(--gray-300);
    --color-divider:       var(--gray-100);

    /* 品牌与交互 */
    --color-brand:        var(--pink-500);    /* #ec4899 主按钮/强调 */
    --color-brand-strong: var(--pink-600);    /* #db2777 悬停/按下 */
    --color-brand-light:  var(--pink-400);
    --color-brand-pale:   var(--pink-300);
    --color-brand-soft:   var(--pink-150);
    --color-brand-tint:   var(--pink-50);
    --color-accent:        var(--amber-500);  /* #f59e0b 价格/徽标 */
    --color-accent-strong: var(--amber-600);
    --color-accent-soft:   var(--amber-100);

    /* 状态 */
    --color-success:        var(--green-500);
    --color-success-strong: var(--green-600);
    --color-success-soft:   var(--green-100);
    --color-warning:        var(--amber-600);
    --color-warning-strong: var(--amber-700);
    --color-warning-soft:   var(--amber-100);
    --color-danger:         var(--red-500);
    --color-danger-strong:  var(--red-600);
    --color-danger-soft:    var(--red-50);
    --color-info:           var(--blue-500);
    --color-info-soft:      var(--blue-100);

    /* 遮罩与阴影色 */
    --color-overlay:      rgba(0, 0, 0, .5);
    --color-overlay-soft: rgba(0, 0, 0, .15);
    --shadow-color:       rgba(0, 0, 0, .08);

    /* ===== 3. 间距（4/8 网格）===== */
    --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;

    /* ===== 4. 字号与排版 ===== */
    --font-xs:  12px;
    --font-sm:  14px;
    --font-md:  clamp(15px, 1.6vw, 16px);
    --font-lg:  clamp(18px, 2.2vw, 20px);
    --font-xl:  clamp(22px, 3vw, 26px);
    --font-2xl: clamp(26px, 4vw, 32px);
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                   "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-bold:   700;
    --fw-heavy:  800;
    --lh-tight:  1.25;
    --lh-normal: 1.6;

    /* ===== 5. 圆角 ===== */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  20px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ===== 6. 阴影 ===== */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, .08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, .12);
    --shadow-lg: 0 10px 24px rgba(0, 0, 0, .15);
    --shadow-brand: 0 10px 22px rgba(249, 115, 22, .22);   /* 首页头像/主卡高亮 */
    --shadow-focus: 0 0 0 3px rgba(236, 72, 153, .28);      /* 键盘焦点环（品牌粉 28%） */

    /* ===== 7. 动效 ===== */
    --dur-fast: .15s;
    --dur-base: .25s;
    --dur-slow: .3s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* ===== 8. 层级（统一 z-index，禁止魔法数字）===== */
    --z-base:    1;
    --z-sticky:  50;
    --z-header:  100;
    --z-float:   200;
    --z-drawer:  900;
    --z-dialog:  1000;
    --z-toast:   1100;

    /* ===== 9. 布局 ===== */
    --page-max:    720px;   /* 移动优先内容最大宽，与首页现宽一致 */
    --control-h:   44px;    /* 触控最小高度（WCAG 2.2 AA / 移动可用性） */
    --tap-target:  44px;
  }
}

/* 无障碍基线：焦点可见（仅影响键盘操作，不影响鼠标/触屏观感） */
@layer tokens {
  :focus-visible {
    outline: 2px solid var(--color-brand);
    outline-offset: 2px;
  }
}