/* ==========================================================================
   wake-ui · 设计令牌
   唯一真源。所有组件只消费变量，不写死数值。
   换主题 = 覆写 :root 下的同名变量，不新增 CSS 文件。
   ========================================================================== */

:root {
  /* ---- 颜色：文字 ---- */
  --wk-ink:        #14191E;   /* = text-primary */
  --wk-ink-2:      #64696E;   /* = text-secondary */
  --wk-ink-3:      #8C9196;   /* = text-tertiary（亮）；#888A8E 是暗色那档 */
  --wk-ink-4:      #C8CDD2;   /* = text-disabled（亮）；#57585C 是暗色那档 */

  /* ---- 颜色：面 ---- */
  --wk-bg:         #F7F8F9;   /* = surface-secondary */
  --wk-card:       #FFFFFF;   /* = surface-canvas（亮）= 纯白；#FAFBFC 是 elevated 浮起层，不是卡片 */
  --wk-card-raised:#FFFFFF;   /* 需要比卡片更亮时用（弹层/浮起元素） */
  --wk-sep-band:   #FAFBFD;   /* 信息流卡片之间的分隔带（实测 4.7~5.3 高） */
  --wk-fill:       #E6EAED;   /* = elevated-fill-control（之前 F3F4F5 太浅） */
  --wk-line:       #F1F2F3;
  --wk-line-subtle:#F3F4F5;   /* = elevated-line-subtle */
  --wk-line-strong:#E6E7E8;   /* = elevated-line-strong，比 default 明显一档 */
  --wk-fill-input: #FAFBFC;   /* = elevated-fill-input，输入框底 */
  --wk-fill-track: #F1F2F3;   /* = elevated-fill-track，进度条/滑杆底 */
  --wk-line-2:     #E6E7E8;   /* = elevated-line-strong，需要明显边界时用 */
  --wk-line-half:  0.5px;   /* 高清屏细线（它用的是 .5px solid #dadde0） */

  /* ---- 品牌 ----
     ★照抄小黑盒 PC 端 --appearance-fill-brand：亮色是纯黑，不是彩色。
     它的"强调"靠黑白对比 + 字重，不靠色相。 */
  --wk-accent:      #000000;   /* = fill-brand（亮） */
  --wk-accent-ink:  #000000;   /* 强调文字同黑 */
  --wk-accent-weak: #F1F2F3;   /* 选中浅底 = line-default，不再是橙雾 */
  /* ★新增（小黑盒有、我们之前没有的能力） */
  --wk-line-focus:  #006EF4;   /* 聚焦色是蓝，不是黑 —— 输入框/选中态都该用它 */
  --wk-ink-strong:  #000000;   /* text-strong：比 primary 更重，用于大标题/金额 */
  --wk-fill-image:  rgba(0,0,0,.08);        /* 图片未加载时的占位底 */
  --wk-material-bar:     #F7F8F9CC;          /* 磨砂顶栏/底栏（8 位色 = 80% 不透明） */
  --wk-material-popover: rgba(255,255,255,.9);/* 磨砂浮层 */
  --wk-line-thick:  #FAFBFC;   /* 比 default 更浅，用于"分割带"不是"分割线" */

  /* ---- IM 专用（照小黑盒 --im-* 的语义，暗色的 hover/border 用半透明白）---- */
  --wk-shadow-modal: 0 3px 24px rgba(0,0,0,.14);
  --wk-scrim: rgba(0,0,0,.40);
  --wk-im-main:   #FFFFFF;   /* 聊天主区底 */
  --wk-im-list:   #FFFFFF;   /* 会话列表底 */
  --wk-im-bubble: #F1F2F3;   /* 对方气泡底 */
  --wk-im-border: #F1F2F3;
  --wk-im-hover:  #F7F8F9;
  --wk-im-field:  #F7F8F9;   /* 输入框底 */
  --wk-im-menu:   rgba(255,255,255,.95);

  /* 语义色弱底：底色 12% 透明，文字取深一档保证 4.5:1 */
  --wk-success-bg: rgba(50,184,70,.12);   --wk-success-ink: #14833C;
  --wk-warning-bg: rgba(246,157,53,.14);  --wk-warning-ink: #9A5B00;
  --wk-danger-bg:  rgba(250,60,75,.10);   --wk-danger-ink:  #C4232F;
  --wk-info-bg:    rgba(0,110,244,.10);   --wk-info-ink:    #0057C2;
  --wk-z-popover: 800;
  --wk-z-modal:   900;

  /* 橙只留给等级标签/徽章这类"荣誉"场景（小黑盒 App 端 #FFB60F） */
  --wk-orange:      #FFB60F;
  --wk-orange-weak: #FFF7E6;
  --wk-on-accent:   #FFFFFF;   /* ★压在品牌底上的文字色（亮色=白） */

  /* ---- 语义色 ---- */
  --wk-danger:     #FA3C4B;   /* = red-100 */
  --wk-danger-ink: #D62B39;
  --wk-danger-weak:#FDECEE;
  --wk-success:    #32B846;   /* = green-0 */
  --wk-success-weak:#EAF8EC;
  --wk-warning:    #F69D35;   /* = yellow-100 */
  --wk-warn-weak:  #FEF5E9;
  --wk-info:       #004B96;   /* = blue-100 */
  --wk-info-weak:  #E8F0F9;

  /* ---- 名次色 ---- */
  --wk-rank-1: #FF3B30;
  --wk-rank-2: #A855F7;
  --wk-rank-3: #3E7BFA;

  /* ---- 荣誉色（等级 / 勋章 / 奖杯）—— 取自小黑盒 #E2C47B 系 ---- */
  --wk-gold:        #E2C47B;
  --wk-gold-deep:   #A9832F;
  --wk-gold-weak:   #FBF4E2;
  --wk-gold-grad:   linear-gradient(135deg, #F6E3AC 0%, #E2C47B 45%, #C9A253 100%);
  --wk-silver:      #C7CDD3;
  --wk-silver-deep: #8A939C;
  --wk-silver-weak: #F4F6F8;
  --wk-silver-grad: linear-gradient(135deg, #F0F3F6 0%, #C7CDD3 50%, #A6AFB8 100%);
  --wk-bronze:      #C98457;
  --wk-bronze-deep: #9A5F3A;
  --wk-bronze-weak: #FBF0E9;
  --wk-bronze-grad: linear-gradient(135deg, #E8B593 0%, #C98457 50%, #A96A3E 100%);

  /* ---- 订单 / 任务状态色 ----
     待处理 → 进行中 → 待验收 → 已完成 / 已取消 / 争议 */
  --wk-st-pending:  #F69D35;
  --wk-st-pending-bg: #FEF5E9;
  --wk-st-ongoing:  #004B96;
  --wk-st-ongoing-bg: #E8F0F9;
  --wk-st-check:    #A855F7;
  --wk-st-check-bg: #F6EEFE;
  --wk-st-done:     #32B846;
  --wk-st-done-bg:  #EAF8EC;
  --wk-st-cancel:   #8C9196;
  --wk-st-cancel-bg:#F3F4F6;
  --wk-st-dispute:  #FA3C4B;
  --wk-st-dispute-bg:#FDECEE;

  /* ---- 渐变（品牌 / 强调） ---- */
  --wk-grad-accent: linear-gradient(135deg, #2A2D33 0%, #14191E 55%, #000000 100%);  /* ★品牌渐变改灰阶 */
  --wk-grad-mask:   linear-gradient(180deg, rgba(20,25,29,0) 0%, rgba(20,25,29,.55) 100%);

  /* ---- 遮罩 ---- */
  --wk-mask: rgba(20,25,29,.45);
  --wk-mask-strong: rgba(20,25,29,.72);

  /* ---- 字号（小黑盒实测档位：10/11/12/13/14/16/18/20/22/24）
     频次：14×118  12×90  16×32  10×20 → 这四档是主力 ---- */
  --wk-fs-10: 10px;
  --wk-fs-11: 11px;
  --wk-fs-12: 12px;
  --wk-fs-13: 13px;
  --wk-fs-14: 14px;
  --wk-fs-16: 16px;
  --wk-fs-18: 18px;
  --wk-fs-20: 20px;
  --wk-fs-22: 22px;
  --wk-fs-24: 24px;
  --wk-fs-28: 28px;   /* 超出它的上限，仅我们自己的页面大标题，组件内不要用 */

  /* ---- 行高 ----
     实测梯度：12→16(1.33)  14→20(1.43)  16→24(1.50)  20→28(1.40)
     字号越大行高比越松 */
  --wk-lh-10: 14px;
  --wk-lh-11: 15px;
  --wk-lh-12: 16px;
  --wk-lh-13: 18px;
  --wk-lh-14: 20px;
  --wk-lh-16: 24px;
  --wk-lh-18: 26px;
  --wk-lh-20: 28px;
  --wk-lh-22: 30px;
  --wk-lh-24: 32px;
  /* 旧名保留（比例制），新组件用上面的像素配对 */
  --wk-lh-tight: 1.25;
  --wk-lh-snug:  1.4;
  --wk-lh-body:  1.55;

  /* ---- 字重 ----
     实测：700×46  500×31  400×26  300×1
     它靠字重做层级，不再只靠字号和颜色 */
  --wk-fw-light:  300;   /* 仅特大标题，正文不要用 */
  --wk-fw-normal: 400;   /* 正文 */
  --wk-fw-medium: 500;   /* 小标题 / 次要强调 */
  --wk-fw-strong: 500;   /* 旧名，语义已从 400 提到 500 */
  --wk-fw-bold:   700;   /* 强调 / 价格 / 数字 */

  /* ---- 圆角 ----
     实测：4px×57(主力) 3px×21 2px×20 8px×15 16px×9
     它用 4 做按钮/输入框/标签，不是 8 */
  --wk-r-2:    2px;
  --wk-r-3:    3px;
  --wk-r-4:    4px;   /* 主力：按钮 / 输入框 / 标签 / 小卡 */
  --wk-r-5:    5px;
  --wk-r-6:    6px;
  --wk-r-8:    8px;   /* 中等卡片 */
  --wk-r-12:  12px;
  --wk-r-16:  16px;   /* 大卡片 / 弹层 */
  --wk-r-20:  20px;
  --wk-r-full: 999px;

  /* ---- 间距 ----
     旧 sp 系列 = 4 的倍数（尺度值，保留兼容）
     新 gap 系列 = 小黑盒实测主档（5 的倍数）：8×81 10×76 12×57 5×56 4×55 20×45 15×30 16×26
     组件内的 padding/margin 一律用 gap 系列 */
  --wk-sp-1: 4px;   --wk-sp-2: 8px;   --wk-sp-3: 12px;
  --wk-sp-4: 16px;  --wk-sp-5: 20px;  --wk-sp-6: 24px;
  --wk-sp-8: 32px;  --wk-sp-10: 40px;

  --wk-gap-2: 2px;
  --wk-gap-3: 3px;
  --wk-gap-4: 4px;
  --wk-gap-5: 5px;
  --wk-gap-6: 6px;
  --wk-gap-8: 8px;
  --wk-gap-10: 10px;
  --wk-gap-12: 12px;
  --wk-gap-15: 15px;
  --wk-gap-16: 16px;
  --wk-gap-20: 20px;
  --wk-gap-24: 24px;
  --wk-gap-32: 32px;

  /* ---- 图片默认填充方式（可被 .wk-img 上的 --wk-img-fit 覆盖） ---- */
  --wk-img-fit: cover;

  /* ---- 组件尺寸 ---- */
  --wk-h-btn-lg: 48px;
  --wk-h-btn-md: 40px;
  --wk-h-btn-sm: 32px;
  --wk-h-input:  48px;
  --wk-h-tap:    44px;   /* 最小点击区 */
  --wk-pad-x:    16px;   /* 页面左右边距 */

  /* ---- 阴影（三级，越深越"浮"） ---- */
  --wk-sh-1: 0 1px 2px rgba(20,25,29,.04);
  --wk-sh-2: 0 2px 8px rgba(20,25,29,.06);
  --wk-sh-3: 0 -4px 24px rgba(20,25,29,.10);

  /* ---- 动效 ---- */
  /* ---- 动效 ----
     时长三档（小黑盒实测：微交互 100~150ms、主力 200ms、遮罩/大位移 240ms）
     缓动四条：主力减速 / 强减速 / 快进快出 / 弹性收尾
     原则：只动 transform 和 opacity（不触发重排），颜色类走 transition */
  --wk-dur-fast:  150ms;   /* hover / 按钮按下 / 工具栏出现 */
  --wk-dur:       200ms;   /* 主力：卡片、列表、折叠 */
  --wk-dur-slow:  240ms;   /* 遮罩、抽屉、弹窗 */
  --wk-ease:        cubic-bezier(.2,.8,.2,1);     /* 主力减速 */
  --wk-ease-out:    cubic-bezier(.25,.46,.45,.94); /* 强减速（位移收尾） */
  --wk-ease-in-out: cubic-bezier(.55,0,.1,1);      /* 快进快出（进出都有） */
  --wk-ease-spring: cubic-bezier(.33,1,.68,1);     /* 弹性（弹出层） */


  /* ---- 层级 ---- */
  --wk-z-sheet:  900;
  --wk-z-mask:   890;
  --wk-z-dialog: 1000;
  --wk-z-toast:  1100;
  --wk-z-viewer: 1200;

  /* ---- 字体 ---- */
  --wk-font: 'HB Sans CN Lite', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", "Source Han Sans SC", sans-serif;
}

/* ==========================================================================
   暗色主题：同名变量整体覆写
   注意：不是加 .dark 类改几个颜色，是整套面/线/文字重排。
   ========================================================================== */
:root[data-theme="dark"] {
  --wk-ink:        #D5D7D9;   /* = text-primary（暗） */
  --wk-ink-2:      #9B9FA2;   /* = text-secondary（暗） */
  --wk-ink-3:      #888A8E;   /* = text-tertiary（暗） */
  --wk-ink-4:      #57585C;   /* = text-disabled（暗） */

  --wk-bg:         #191B1F;   /* = surface-secondary（暗） */
  --wk-card:       #1E2026;   /* = surface-canvas（暗）；#2A2D33 是 elevated 浮起层 */
  --wk-fill:       #333540;   /* = fill-control（暗） */
  --wk-line:       #292B31;   /* = line-default（暗） */
  --wk-line-2:     #35363C;   /* = line-strong（暗） */
  --wk-line-subtle:#25272D;
  --wk-line-strong:#3D3F49;
  --wk-fill-input: #1A1C22;   /* = fill-input（暗） */
  --wk-fill-track: #282B33;   /* = fill-track（暗） */

  --wk-accent:      #FFFFFF;   /* = fill-brand（暗）= 纯白 */
  --wk-accent-ink:  #FFFFFF;
  --wk-accent-weak: #2A2D33;
  --wk-orange:      #FFB60F;
  --wk-orange-weak: #2A2312;
  --wk-on-accent:   #000000;   /* ★暗色品牌是白底，文字必须翻黑 */
  /* 语义弱底（暗）：底色提到 18%，文字提亮 */
  --wk-success-bg: rgba(50,184,70,.18);   --wk-success-ink: #5BD675;
  --wk-warning-bg: rgba(246,157,53,.18);  --wk-warning-ink: #F6B45E;
  --wk-danger-bg:  rgba(250,60,75,.18);   --wk-danger-ink:  #FF7A85;
  --wk-info-bg:    rgba(82,183,255,.16);  --wk-info-ink:    #6FC0FF;

  /* ★暗色的 hover/border 用半透明白，不用写死的灰 —— 任何底色上都协调 */
  --wk-shadow-modal: 0 3px 24px rgba(0,0,0,.5);
  --wk-scrim: rgba(0,0,0,.60);
  --wk-im-main:   #1E2026;
  --wk-im-list:   #26282D;
  --wk-im-bubble: #26282D;
  --wk-im-border: rgba(255,255,255,.05);
  --wk-im-hover:  rgba(255,255,255,.05);
  --wk-im-field:  rgba(0,0,0,.20);
  --wk-im-menu:   rgba(15,18,20,.90);
  --wk-line-focus:  #006EF4;
  --wk-ink-strong:  #FFFFFF;
  --wk-fill-image:  rgba(255,255,255,.08);
  --wk-material-bar:     #26282DCC;
  --wk-material-popover: rgba(15,18,20,.9);
  --wk-line-thick:  #23242A;

  --wk-danger:     #FF5A64;
  --wk-danger-ink: #FF838B;
  --wk-danger-weak:#2A1416;

  --wk-sh-1: 0 1px 2px rgba(0,0,0,.4);
  --wk-sh-2: 0 2px 8px rgba(0,0,0,.45);
  --wk-sh-3: 0 -4px 24px rgba(0,0,0,.55);

  --wk-gold-weak:   #2A2312;
  --wk-gold-deep:   #F0D89B;
  --wk-silver-weak: #1E2226;
  --wk-silver-deep: #D5DBE1;
  --wk-bronze-weak: #2A1D14;
  --wk-bronze-deep: #E0AD8E;

  --wk-st-pending-bg: #2A2211;
  --wk-st-ongoing-bg: #101F33;
  --wk-st-check-bg:   #241A33;
  --wk-st-done-bg:    #10241A;
  --wk-st-cancel-bg:  #1C2126;
  --wk-st-dispute-bg: #2A1416;
  --wk-st-ongoing:    #6FA8F5;
  --wk-st-pending:    #FFC15C;
  --wk-st-done:       #5FD39A;
  --wk-st-check:      #C48CF5;

  --wk-mask: rgba(0,0,0,.55);
  --wk-mask-strong: rgba(0,0,0,.78);

  /* ---- ★暗色补齐（原来这 10 个漏了覆盖，暗色下会漏出亮色值）---- */
  --wk-sep-band:   #1E2026;   /* 信息流分隔带：暗色下必须是深色，否则是一条白杠 */
  --wk-success:    #3DD45F;
  --wk-success-weak:#10241A;
  --wk-warning:    #FFB020;
  --wk-warn-weak:  #2A2211;
  --wk-info:       #6FA8FF;
  --wk-info-weak:  #101F33;
  --wk-st-cancel:  #8C9196;
  --wk-st-cancel-bg:#1C2126;
  --wk-st-dispute: #FF5A64;
  --wk-st-dispute-bg:#2A1416;

  --wk-gold:       #F0D89B;
  --wk-gold-grad:  linear-gradient(45deg, #F6E3AC 0%, #C9A253 100%);
  --wk-silver:     #D5DBE1;
  --wk-silver-grad:linear-gradient(45deg, #C9CFD6 0%, #8E959C 100%);
  --wk-bronze:     #E0AD8E;
  --wk-bronze-grad:linear-gradient(45deg, #D08A4E 0%, #8E4F20 100%);

  --wk-grad-mask:  linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 100%);
  --wk-grad-accent:linear-gradient(135deg, #FFFFFF 0%, #D5D7D9 55%, #9B9FA2 100%);
}

/* ================================================================ 彩色背景主题
   ★场景：组件要放在「彩色/图片背景」上（活动页、大图上的标签、视频控件）。
     固定色值在任何背景上都只能对一种，所以这两套主题不用实色，
     全部改成透明度叠加 —— 底下是什么颜色都能协调。

     [data-theme="tint"]   浅色底 / 淡彩底上 → 全用黑色透明度
     [data-theme="vivid"]  深色底 / 艳彩底上 → 全用白色透明度
     focus 色在深底上必须提亮（#006EF4 → #52B7FF），否则不够跳。
*/

[data-theme="tint"] {
  --wk-card:        rgba(255,255,255,.60);
  --wk-card-2:      rgba(255,255,255,.45);
  --wk-bg:          transparent;
  --wk-fill:        rgba(0,0,0,.08);
  --wk-fill-input:  rgba(0,0,0,.03);
  --wk-fill-track:  rgba(0,0,0,.05);
  --wk-line:        rgba(0,0,0,.05);
  --wk-line-subtle: rgba(0,0,0,.03);
  --wk-line-strong: rgba(0,0,0,.10);
  --wk-line-focus:  #006EF4;
  --wk-ink:         rgba(0,0,0,.95);
  --wk-ink-2:       rgba(0,0,0,.80);
  --wk-ink-3:       rgba(0,0,0,.60);
  --wk-ink-4:       rgba(0,0,0,.40);
  --wk-accent:      #000000;
  --wk-on-accent:   #FFFFFF;
  --wk-shadow-card: none;
}

[data-theme="vivid"] {
  --wk-card:        rgba(0,0,0,1);
  --wk-card-2:      rgba(255,255,255,.08);
  --wk-bg:          transparent;
  --wk-fill:        rgba(255,255,255,.15);
  --wk-fill-input:  rgba(0,0,0,.05);
  --wk-fill-track:  rgba(255,255,255,.12);
  --wk-line:        rgba(255,255,255,.08);
  --wk-line-subtle: rgba(255,255,255,.05);
  --wk-line-strong: rgba(255,255,255,.15);
  --wk-line-focus:  #52B7FF;
  --wk-ink:         rgba(255,255,255,1);
  --wk-ink-2:       rgba(255,255,255,.80);
  --wk-ink-3:       rgba(255,255,255,.60);
  --wk-ink-4:       rgba(255,255,255,.40);
  --wk-accent:      #FFFFFF;
  --wk-on-accent:   #000000;
  --wk-shadow-card: none;
}