/* ════════════════════════════════════════════════════════════
   tokens.css — sman 浅色主题设计令牌
   ════════════════════════════════════════════════════════════
   与 sman 客户端 src/index.css 的 :root 对齐。
   想换主题（比如换深色 / 换色调），只需要改这一个文件。
   ════════════════════════════════════════════════════════════ */

:root {
  /* ── 颜色（HSL：方便色相调整） ───────────────────────── */
  --bg:            hsl(40 20% 94%);   /* 宣纸黄主背景 */
  --bg-card:       hsl(40 15% 98%);   /* 卡片底 */
  --bg-elevated:   hsl(40 18% 96%);   /* 微浮层 */
  --bg-muted:      hsl(40 10% 88%);   /* 次级背景 */

  --fg:            hsl(220 15% 15%);  /* 深墨主文字 */
  --fg-strong:     hsl(220 20% 10%);  /* 强调文字 */
  --fg-muted:      hsl(220 10% 45%);  /* 弱化文字 */
  --fg-dim:        hsl(220 8% 60%);   /* 占位/辅助 */

  --border:        hsl(40 10% 82%);   /* 卡片边线 */
  --border-strong: hsl(40 8% 72%);    /* hover 边线 */
  --border-soft:   hsl(40 10% 88%);   /* 极浅分隔线 */

  --primary:       hsl(220 15% 25%);  /* 深墨主色（按钮底） */
  --primary-fg:    hsl(40 15% 98%);   /* 主色上的文字 */
  --ring:          hsl(220 15% 35%);  /* 焦点环 */

  /* ── 功能色（与 sman biz 组件对齐） ──────────────────── */
  --success:       hsl(152 60% 38%);  /* 完成态 */
  --success-bg:    hsl(152 60% 95%);
  --warning:       hsl(40 90% 50%);
  --danger:        hsl(0 70% 55%);

  /* ── 糖果色（背景流动球体，与 bg-canvas.js 对齐） ───── */
  --candy-1:       hsla(340, 95%, 72%, 0.7);   /* 粉 */
  --candy-2:       hsla(260, 90%, 75%, 0.65);  /* 紫 */
  --candy-3:       hsla(55,  100%, 65%, 0.65); /* 黄 */
  --candy-4:       hsla(165, 80%, 60%, 0.65);  /* 青绿 */
  --candy-5:       hsla(20,  100%, 70%, 0.65); /* 橙 */
  --candy-6:       hsla(200, 90%, 70%, 0.65);  /* 蓝 */

  /* ── 间距（8px 基础） ──────────────────────────────── */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   16px;
  --space-lg:   24px;
  --space-xl:   32px;
  --space-2xl:  48px;
  --space-3xl:  64px;
  --space-section: 96px;

  /* ── 圆角（与 sman --radius 0.625rem 对齐） ────────── */
  --radius-sm:    6px;
  --radius:       10px;     /* sman 基础圆角 */
  --radius-md:    14px;
  --radius-lg:    18px;
  --radius-xl:    28px;
  --radius-pill:  999px;

  /* ── 阴影 ─────────────────────────────────────────── */
  --shadow-soft: 0 1px 2px rgba(35,38,41,0.04), 0 4px 16px rgba(35,38,41,0.04);
  --shadow-lift: 0 2px 8px rgba(35,38,41,0.06), 0 12px 40px rgba(35,38,41,0.08);
  --shadow-glow: 0 0 0 1px var(--border), 0 8px 32px rgba(35,38,41,0.06);

  /* ── 字体 ─────────────────────────────────────────── */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ── 字号阶梯 ─────────────────────────────────────── */
  --fs-xs:    12px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;

  /* ── 动画 ─────────────────────────────────────────── */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-snap: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast:  0.18s;
  --dur-base:  0.3s;
  --dur-slow:  0.7s;

  /* ── 容器宽度 ─────────────────────────────────────── */
  --container-max: 1200px;
  --container-pad: 32px;
}