/* goutou-im 全站设计令牌 — 所有 UI(IM + 游戏)引用这里的 CSS 变量,不硬编码颜色/字号/间距。
   引入:<link rel="stylesheet" href="/docs/ui-handoff/design-tokens.css"> 或合并进 web/css/style.css。
   暗色/游戏主题在 :root 下用 [data-theme] 覆盖。 */
:root {
  /* ── 品牌/语义色(IM 微信风) ── */
  --c-brand: #07c160;          /* 主色(微信绿) */
  --c-brand-d: #06a04f;        /* 主色按下/深 */
  --c-brand-l: #e8f9ef;        /* 主色浅底 */
  --c-link: #576b95;           /* 链接/@提及 */
  --c-danger: #fa5151;         /* 危险/警示/红点 */
  --c-warning: #fa9d3b;        /* 警告 */
  --c-success: #07c160;
  --c-info: #10aeff;

  /* ── 中性/背景/文本 ── */
  --c-bg: #f3f4f6;             /* 页面底(现代中性灰) */
  --c-surface: #ffffff;        /* 卡片/列表项 */
  --c-surface-2: #f1f2f4;      /* 次级面 */
  --c-text: #191919;           /* 主文本 */
  --c-text-2: #888888;         /* 次文本 */
  --c-text-3: #b2b2b2;         /* 占位/禁用文本 */
  --c-border: #ececf0;
  --c-divider: #f0f0f0;
  --c-mask: rgba(0,0,0,.5);    /* 遮罩 */

  /* ── 聊天气泡 ── */
  --c-bubble-me: #95ec69;      /* 自己(绿) */
  --c-bubble-other: #ffffff;   /* 对方(白) */
  --c-bubble-text: #191919;

  /* ── 消息功能卡片(见 docs/message-cards.md;禁止在卡片里写死色) ── */
  /* 金融族:整卡渐变 */
  --c-card-rp-from:#fa6a5a; --c-card-rp-to:#e8402f;   /* 红包 暖红渐变 */
  --c-card-rp-gold:#ffd24d;                            /* 红包 金色点缀 */
  --c-card-tx-from:#ffb04d; --c-card-tx-to:#fb8c00;    /* 转账 橙金渐变(与红包红区分) */
  /* 信息族:中性卡 + 强调色(用在左色条/徽章/图标) */
  --c-card-approval:#fa9d3b;     /* 审批 待批 琥珀 */
  --c-card-approval-ok:#07c160;  /* 审批 通过 绿 */
  --c-card-approval-no:#fa5151;  /* 审批 驳回 红 */
  --c-card-live:#fa5151;         /* 直播 红 */
  --c-card-contact:#576b95;      /* 名片 蓝灰 */

  /* ── 游戏/赌场专用(游戏页在此基础上用) ── */
  --c-casino-gold: #ffd700;
  --c-casino-gold-d: #b8860b;
  --c-casino-red: #c8102e;
  --c-casino-dark: #1a0d12;    /* 游戏深底 */
  --c-casino-felt: #0b6e3b;    /* 牌桌绿绒 */
  --c-neon: #ff3b1f;           /* 霓虹/中奖发光 */
  --c-led: #29e36a;            /* LED 计分屏绿字 */

  /* ── 字号 / 字重 ── */
  --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-lg: 17px;
  --fs-xl: 20px; --fs-2xl: 24px; --fs-3xl: 30px;
  --fw-normal: 400; --fw-medium: 500; --fw-bold: 600; --fw-heavy: 800;
  --ff-base: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
  --ff-num: "DIN Alternate", "Bebas Neue", monospace; /* 数字/计分/金额 */

  /* ── 间距(8pt 栅格) ── */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;

  /* ── 圆角 ── */
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  /* ── 阴影 ── */
  --sh-1: 0 1px 3px rgba(17,24,39,.06), 0 1px 2px rgba(17,24,39,.04);
  --sh-2: 0 4px 12px rgba(17,24,39,.08), 0 2px 4px rgba(17,24,39,.04);
  --sh-3: 0 12px 32px rgba(17,24,39,.12);
  --sh-glow: 0 0 12px var(--c-neon); /* 游戏发光 */

  /* ── 层级 ── */
  --z-nav: 100; --z-dropdown: 500; --z-modal: 1000; --z-toast: 2000;

  /* ── 动效 ── */
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-back: cubic-bezier(.34,1.56,.64,1); /* 回弹 */
  --dur-fast: .15s; --dur: .25s; --dur-slow: .4s;

  /* ── 布局/安全区 ── */
  --nav-h: 50px;               /* 顶栏高 */
  --tabbar-h: 56px;            /* 底部 tab 高 */
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* 暗色主题(IM 夜间) */
:root[data-theme="dark"] {
  --c-bg: #111111; --c-surface: #1e1e1e; --c-surface-2: #2a2a2a;
  --c-text: #ededed; --c-text-2: #9a9a9a; --c-text-3: #6a6a6a;
  --c-border: #2f2f2f; --c-divider: #262626;
  --c-bubble-other: #2a2a2a; --c-bubble-text: #ededed;
  /* 金融族渐变压暗,避免荧光刺眼;信息族走 --c-surface 自动适配 */
  --c-card-rp-from:#c94436; --c-card-rp-to:#a82e22;
  --c-card-tx-from:#c77f24; --c-card-tx-to:#b56700;
}