/* ============================================================
   variables.css — 微信设计变量（浅色 / 深色）
   所有颜色、圆角、间距统一走 CSS 变量，改主题只改这里
   ============================================================ */
:root {
  /* 品牌色 */
  --wx-green: #07C160;
  --wx-green-deep: #06AD56;
  --wx-green-soft: #95EC69;
  --wx-red: #FA5151;
  --wx-orange: #FA9D3B;
  --wx-gold: #F7C35B;
  --wx-link: #576B95;

  /* 背景与表面 */
  --wx-bg: #EDEDED;
  --wx-header-bg: #EDEDED;
  --wx-card: #FFFFFF;
  --wx-input-bg: #F7F7F7;
  --wx-tabbar-bg: #F7F7F7;
  --wx-rail: #2E2E2E;
  --wx-rail-hover: #232323;

  /* 文字 */
  --wx-text: #191919;
  --wx-sub: #888888;
  --wx-light: #B2B2B2;
  --wx-placeholder: #B2B2B2;

  /* 线条 */
  --wx-line: #E5E5E5;
  --wx-line-deep: #D6D6D6;

  /* 聊天气泡 */
  --wx-bubble-mine: #95EC69;
  --wx-bubble-theirs: #FFFFFF;
  --wx-bubble-text: #191919;

  /* 状态色 */
  --wx-online: #07C160;
  --wx-offline: #B2B2B2;

  /* 遮罩 */
  --wx-mask: rgba(0, 0, 0, 0.5);
  --wx-mask-light: rgba(0, 0, 0, 0.25);

  /* 红包 */
  --wx-rp-top: #F94E4E;
  --wx-rp-bottom: #E64340;
  --wx-rp-gold: #F7C35B;

  /* 阴影 */
  --wx-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --wx-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.18);

  /* 尺寸 */
  --wx-radius: 8px;
  --wx-radius-lg: 14px;
  --wx-avatar: 44px;
  --wx-avatar-lg: 64px;
  --wx-avatar-xl: 92px;
  --wx-header-h: 56px;
  --wx-tabbar-h: 56px;
  --wx-rail-w: 72px;
  --wx-list-w: 300px;

  /* 字体 */
  --wx-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Helvetica Neue",
    "Microsoft YaHei", "Segoe UI", Roboto, sans-serif;
}

/* ============ 深色模式（微信暗黑风格） ============ */
[data-theme="dark"] {
  --wx-bg: #111111;
  --wx-header-bg: #1F1F1F;
  --wx-card: #1F1F1F;
  --wx-input-bg: #2A2A2A;
  --wx-tabbar-bg: #1F1F1F;
  --wx-rail: #191919;
  --wx-rail-hover: #232323;

  --wx-text: #D9D9D9;
  --wx-sub: #7F7F7F;
  --wx-light: #5F5F5F;
  --wx-placeholder: #5F5F5F;

  --wx-line: #2C2C2C;
  --wx-line-deep: #3A3A3A;

  --wx-bubble-mine: #2C5F3C;
  --wx-bubble-theirs: #2E2E2E;
  --wx-bubble-text: #D9D9D9;

  --wx-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
  --wx-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
}