/* ════════════════════════════════════════════════════════════════════════
   tokens/colors.css — Kuangs Design System v1.0 — 颜色 Token 单一源头
   ────────────────────────────────────────────────────────────────────────
   架构定位: L1 Design Tokens 之颜色层 (其他 5 类: type/space/radius/shadow/motion)
   作者: 匡氏集团-赵云  日期: 2026-04-28

   ## 设计原则
   1. **9 阶 Palette** — 8 个色相 × 9 阶 (50/100/.../900) 是全集团调色板上限
   2. **Hub Color Registry** — 每个 hub 在 §4 注册主色, 唯一改动点
   3. **饱和度自动校准** — dark 主题用 500, light 主题用 600, hub 不必关心
   4. **Semantic 别名** — `--accent / --success / --warning / --danger` 是 alias, 指向 palette
   5. **平台品牌色不变** — Amazon 橙永远 #ff9900, 不参与主题

   ## 决策入口
   新 hub 该用什么色? → docs/design-system/06-hub-color-registry.md
   8 个业务象限决策树, 5 秒选定主色, 不靠设计师审美

   ## 兼容
   完全兼容 shared.css v2 的 `--accent / --bg-* / --text-* / --border-* / --plat-*`
   现有 hub 0 改动, 新 hub 用新机制
   ════════════════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────────────────────────────────────────
   §1. Palette — 集团完整调色板 (theme-independent, 不随主题变)
   ──────────────────────────────────────────────────────────────────────── */
:root {
  /* Gray (中性骨架, 18 阶满足所有边框/文字/背景需求) */
  --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;
  --gray-950: #0b0d12;

  /* Blue — 数据分析象限 (OrderHub / VOC / CommandHub / Northstar) */
  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-200: #bfdbfe;
  --blue-300: #93c5fd;
  --blue-400: #60a5fa;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
  --blue-900: #1e3a8a;

  /* Red — 风险监控象限 (Guardian / Sentinel) */
  --red-50:  #fef2f2;
  --red-100: #fee2e2;
  --red-200: #fecaca;
  --red-300: #fca5a5;
  --red-400: #f87171;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;
  --red-800: #991b1b;
  --red-900: #7f1d1d;

  /* Pink — 红人营销象限 (KOLHub / TalentHub) */
  --pink-50:  #fdf2f8;
  --pink-100: #fce7f3;
  --pink-200: #fbcfe8;
  --pink-300: #f9a8d4;
  --pink-400: #f472b6;
  --pink-500: #ec4899;
  --pink-600: #db2777;
  --pink-700: #be185d;
  --pink-800: #9d174d;
  --pink-900: #831843;

  /* Orange — 创意生产象限 (CreativeHub / PPTHub) */
  --orange-50:  #fff7ed;
  --orange-100: #ffedd5;
  --orange-200: #fed7aa;
  --orange-300: #fdba74;
  --orange-400: #fb923c;
  --orange-500: #f97316;
  --orange-600: #ea580c;
  --orange-700: #c2410c;
  --orange-800: #9a3412;
  --orange-900: #7c2d12;

  /* Green — AI 助手 / 增长营销象限 (WorkAI / AIHub / GrowthHub) */
  --green-50:  #ecfdf5;
  --green-100: #d1fae5;
  --green-200: #a7f3d0;
  --green-300: #6ee7b7;
  --green-400: #34d399;
  --green-500: #10b981;
  --green-600: #059669;
  --green-700: #047857;
  --green-800: #065f46;
  --green-900: #064e3b;

  /* Purple — 知识沉淀象限 (WikiAI / HelpHub) */
  --purple-50:  #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --purple-800: #6b21a8;
  --purple-900: #581c87;

  /* Indigo — 供应链象限 (SupplyHub / OpsHub) */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-800: #3730a3;
  --indigo-900: #312e81;

  /* Cyan — 服务支持象限 (ServiceHub) */
  --cyan-50:  #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
}

/* ────────────────────────────────────────────────────────────────────────
   §2. Platform Brand Colors — 品牌色 = 现实, 不参与主题切换
   ──────────────────────────────────────────────────────────────────────── */
:root {
  --plat-amazon:    #ff9900;
  --plat-shopify:   #95bf47;
  --plat-tiktok:    #69c9d0;
  --plat-temu:      #fb6d3a;
  --plat-walmart:   #0071ce;
  --plat-youtube:   #ff0000;
  --plat-instagram: #e1306c;
  --plat-facebook:  #1877f2;
  --plat-reddit:    #ff4500;
  --plat-pinterest: #bd081c;
  --plat-google:    #4285f4;
  --plat-meta:      #1877f2;
  --plat-twitter:   #1da1f2;
  --plat-x:         #000000;
  --plat-linkedin:  #0a66c2;
  --plat-discord:   #5865f2;
}

/* ────────────────────────────────────────────────────────────────────────
   §3. Semantic Mapping — 把 palette 派生为语义化 token
   核心: dark 用 500 阶 (深底上更亮), light 用 600 阶 (浅底上更深)
   ──────────────────────────────────────────────────────────────────────── */
:root, [data-theme="dark"] {
  /* === Logo 真实蓝 (从 kuangs-logo-blue.png 取色, 仅 light wordmark 用) === */
  --logo-blue: #0b0748;

  /* === Brand Wordmark === (赵云 2026-04-28 拍板)
     - dark mode: 白色 (text-primary, GitHub/Notion/Linear 玩法, 干净专业)
     - light mode: logo 真实蓝 #0b0748 (跟 logo 文件同色, 品牌一致) */
  --brand-wordmark: var(--text-primary);

  /* === Background — 三阶, 全用 gray palette === */
  --bg-canvas:   var(--gray-950);                /* #0b0d12 最底 */
  --bg-elevated: #11141b;                        /* 卡片层 (gray-925, palette 没此阶, 直接 hex) */
  --bg-surface:  #181c25;                        /* 面层 (gray-900 偏暖) */
  --bg-overlay:  #1e2330;                        /* 浮起 (drawer/modal) */
  --bg-hover:    rgba(255,255,255,.06);
  --bg-active:   rgba(255,255,255,.10);

  /* === Text — 三阶, dark 用透明度 (跟随 hub accent 自然融合) === */
  --text-primary:   rgba(255,255,255,.95);
  --text-secondary: rgba(255,255,255,.72);
  --text-tertiary:  rgba(255,255,255,.48);
  --text-inverse:   var(--gray-900);
  --text-on-accent: #ffffff;

  /* === Border === */
  --border-subtle:  rgba(255,255,255,.08);
  --border-default: rgba(255,255,255,.14);
  --border-strong:  rgba(255,255,255,.28);

  /* === Accent (默认蓝, hub 在 §4 覆盖) === */
  --accent:        var(--blue-500);
  --accent-hover:  var(--blue-400);              /* dark hover 更亮 */
  --accent-active: var(--blue-600);
  --accent-bg:     rgba(59,130,246,.10);         /* blue-500 + 10% */
  --accent-border: rgba(59,130,246,.38);
  --accent-glow:   rgba(59,130,246,.25);

  /* === Semantic === */
  --success:        var(--green-500);
  --success-bg:     rgba(16,185,129,.12);
  --success-border: rgba(16,185,129,.30);
  --warning:        var(--orange-500);
  --warning-bg:     rgba(249,115,22,.12);
  --warning-border: rgba(249,115,22,.30);
  --danger:         var(--red-500);
  --danger-bg:      rgba(239,68,68,.12);
  --danger-border:  rgba(239,68,68,.30);
  --info:           var(--blue-400);
  --info-bg:        rgba(96,165,250,.12);
  --info-border:    rgba(96,165,250,.30);

  /* === Severity (P0/P1/P2 — 跟 semantic 同源) === */
  --p0: var(--red-500);    --p0-bg: rgba(239,68,68,.10);  --p0-bd: rgba(239,68,68,.30);
  --p1: var(--orange-400); --p1-bg: rgba(251,146,60,.10); --p1-bd: rgba(251,146,60,.30);
  --p2: var(--gray-400);   --p2-bg: rgba(156,163,175,.10);--p2-bd: rgba(156,163,175,.30);

  /* === Glass (用于 CommandHub 等高端面板) === */
  --glass-bg:      rgba(13,17,23,.7);
  --glass-border:  rgba(255,255,255,.08);

  /* === Scrollbar === */
  --scrollbar-thumb: rgba(255,255,255,.15);
  --scrollbar-track: transparent;
}

[data-theme="light"] {
  /* === Brand Wordmark === light 用 logo 真实蓝 #0b0748 (从 kuangs-logo-blue.png 取色) */
  --brand-wordmark: var(--logo-blue);

  /* === Background — Notion 风, 三阶白 === */
  --bg-canvas:   #ffffff;
  --bg-elevated: var(--gray-50);                 /* #f9fafb */
  --bg-surface:  #ffffff;
  --bg-overlay:  #ffffff;
  --bg-hover:    rgba(0,0,0,.04);
  --bg-active:   rgba(0,0,0,.07);

  /* === Text === */
  --text-primary:   var(--gray-900);             /* #111827 */
  --text-secondary: var(--gray-600);             /* #4b5563 */
  --text-tertiary:  var(--gray-500);             /* #6b7280 */
  --text-inverse:   #ffffff;
  --text-on-accent: #ffffff;

  /* === Border === */
  --border-subtle:  var(--gray-200);             /* #e5e7eb */
  --border-default: var(--gray-300);             /* #d1d5db */
  --border-strong:  var(--gray-400);             /* #9ca3af */

  /* === Accent (默认蓝 600, hub 在 §4 覆盖) === */
  --accent:        var(--blue-600);
  --accent-hover:  var(--blue-700);              /* light hover 更深 */
  --accent-active: var(--blue-800);
  --accent-bg:     rgba(37,99,235,.08);          /* blue-600 + 8% */
  --accent-border: rgba(37,99,235,.30);
  --accent-glow:   rgba(37,99,235,.18);

  /* === Semantic (light 全部用 600 阶, 深色更可见) === */
  --success:        var(--green-600);
  --success-bg:     rgba(5,150,105,.10);
  --success-border: rgba(5,150,105,.30);
  --warning:        var(--orange-600);
  --warning-bg:     rgba(234,88,12,.10);
  --warning-border: rgba(234,88,12,.30);
  --danger:         var(--red-600);
  --danger-bg:      rgba(220,38,38,.10);
  --danger-border:  rgba(220,38,38,.30);
  --info:           var(--blue-600);
  --info-bg:        rgba(37,99,235,.08);
  --info-border:    rgba(37,99,235,.30);

  /* === Severity === */
  --p0: var(--red-600);    --p0-bg: rgba(220,38,38,.10);  --p0-bd: rgba(220,38,38,.30);
  --p1: var(--orange-600); --p1-bg: rgba(234,88,12,.10);  --p1-bd: rgba(234,88,12,.30);
  --p2: var(--gray-600);   --p2-bg: rgba(75,85,99,.10);   --p2-bd: rgba(75,85,99,.30);

  /* === Glass === */
  --glass-bg:      rgba(255,255,255,.85);
  --glass-border:  rgba(208,215,222,.6);

  /* === Scrollbar === */
  --scrollbar-thumb: rgba(0,0,0,.18);
  --scrollbar-track: transparent;
}

/* ────────────────────────────────────────────────────────────────────────
   §4. Hub Color Registry — 所有 hub 主色唯一注册地
   ────────────────────────────────────────────────────────────────────────
   规则:
   - 每个 hub 在此注册 [data-hub="key"] 块, 覆盖 --accent 系列
   - dark 主题用 *-500, light 主题用 *-600 (饱和度自动校准)
   - 决策依据: docs/design-system/06-hub-color-registry.md (8 业务象限)
   - 添加新 hub: 复制现有块, 改 hub key 和 palette 色相
   - 禁止: 在 hub 自己的 css 文件里写 :root { --accent: xxx } 覆盖

   用法: 在 hub 模板根元素加 data-hub 属性
       <body data-theme="dark" data-hub="kolhub">

   ──────────────────────────────────────────────────────────────────────── */

/* ── 数据分析象限: 蓝 (默认色, OrderHub/VOC/CommandHub/Northstar 不写 data-hub 也能用) ── */
[data-hub="orderhub"], [data-hub="voc"], [data-hub="commandhub"], [data-hub="northstar"],
[data-hub="adshub"], [data-hub="genome"] {
  /* 默认即蓝, 留空块表示"显式声明用默认蓝", 改主题时仍走 §3 */
}

/* ── 风险监控象限: 红 (Guardian / Sentinel) ── */
[data-theme="dark"][data-hub="guardian"],
[data-theme="dark"][data-hub="sentinel"] {
  --accent:        var(--red-500);
  --accent-hover:  var(--red-400);
  --accent-active: var(--red-600);
  --accent-bg:     rgba(239,68,68,.10);
  --accent-border: rgba(239,68,68,.38);
  --accent-glow:   rgba(239,68,68,.25);
}
[data-theme="light"][data-hub="guardian"],
[data-theme="light"][data-hub="sentinel"] {
  --accent:        var(--red-600);
  --accent-hover:  var(--red-700);
  --accent-active: var(--red-800);
  --accent-bg:     rgba(220,38,38,.08);
  --accent-border: rgba(220,38,38,.30);
  --accent-glow:   rgba(220,38,38,.18);
}

/* ── 红人/营销象限: 品红 (KOLHub / TalentHub) ── */
[data-theme="dark"][data-hub="kolhub"],
[data-theme="dark"][data-hub="talent"] {
  --accent:        var(--pink-500);
  --accent-hover:  var(--pink-400);
  --accent-active: var(--pink-600);
  --accent-bg:     rgba(236,72,153,.10);
  --accent-border: rgba(236,72,153,.38);
  --accent-glow:   rgba(236,72,153,.25);
}
[data-theme="light"][data-hub="kolhub"],
[data-theme="light"][data-hub="talent"] {
  --accent:        var(--pink-600);
  --accent-hover:  var(--pink-700);
  --accent-active: var(--pink-800);
  --accent-bg:     rgba(219,39,119,.08);
  --accent-border: rgba(219,39,119,.30);
  --accent-glow:   rgba(219,39,119,.18);
}

/* ── 创意生产象限: 橙 (CreativeHub / PPTHub) ── */
[data-theme="dark"][data-hub="creative"],
[data-theme="dark"][data-hub="ppthub"] {
  --accent:        var(--orange-500);
  --accent-hover:  var(--orange-400);
  --accent-active: var(--orange-600);
  --accent-bg:     rgba(249,115,22,.10);
  --accent-border: rgba(249,115,22,.38);
  --accent-glow:   rgba(249,115,22,.25);
}
[data-theme="light"][data-hub="creative"],
[data-theme="light"][data-hub="ppthub"] {
  --accent:        var(--orange-600);
  --accent-hover:  var(--orange-700);
  --accent-active: var(--orange-800);
  --accent-bg:     rgba(234,88,12,.08);
  --accent-border: rgba(234,88,12,.30);
  --accent-glow:   rgba(234,88,12,.18);
}

/* ── AI/增长象限: 绿 (WorkAI / AIHub / GrowthHub) ── */
[data-theme="dark"][data-hub="workai"],
[data-theme="dark"][data-hub="aihub"],
[data-theme="dark"][data-hub="growth"] {
  --accent:        var(--green-500);
  --accent-hover:  var(--green-400);
  --accent-active: var(--green-600);
  --accent-bg:     rgba(16,185,129,.10);
  --accent-border: rgba(16,185,129,.38);
  --accent-glow:   rgba(16,185,129,.25);
}
[data-theme="light"][data-hub="workai"],
[data-theme="light"][data-hub="aihub"],
[data-theme="light"][data-hub="growth"] {
  --accent:        var(--green-600);
  --accent-hover:  var(--green-700);
  --accent-active: var(--green-800);
  --accent-bg:     rgba(5,150,105,.08);
  --accent-border: rgba(5,150,105,.30);
  --accent-glow:   rgba(5,150,105,.18);
}

/* ── 知识沉淀象限: 紫 (WikiAI / HelpHub / MCPHub) ── */
[data-theme="dark"][data-hub="wikiai"],
[data-theme="dark"][data-hub="help"],
[data-theme="dark"][data-hub="mcphub"] {
  --accent:        var(--purple-500);
  --accent-hover:  var(--purple-400);
  --accent-active: var(--purple-600);
  --accent-bg:     rgba(168,85,247,.10);
  --accent-border: rgba(168,85,247,.38);
  --accent-glow:   rgba(168,85,247,.25);
}
[data-theme="light"][data-hub="wikiai"],
[data-theme="light"][data-hub="help"],
[data-theme="light"][data-hub="mcphub"] {
  --accent:        var(--purple-600);
  --accent-hover:  var(--purple-700);
  --accent-active: var(--purple-800);
  --accent-bg:     rgba(147,51,234,.08);
  --accent-border: rgba(147,51,234,.30);
  --accent-glow:   rgba(147,51,234,.18);
}

/* ── 供应链/运维象限: 靛 (SupplyHub / IntakeHub / ForgeHub / OpsHub) ── */
[data-theme="dark"][data-hub="supply"],
[data-theme="dark"][data-hub="intake"],
[data-theme="dark"][data-hub="forge"],
[data-theme="dark"][data-hub="ops"] {
  --accent:        var(--indigo-500);
  --accent-hover:  var(--indigo-400);
  --accent-active: var(--indigo-600);
  --accent-bg:     rgba(99,102,241,.10);
  --accent-border: rgba(99,102,241,.38);
  --accent-glow:   rgba(99,102,241,.25);
}
[data-theme="light"][data-hub="supply"],
[data-theme="light"][data-hub="intake"],
[data-theme="light"][data-hub="forge"],
[data-theme="light"][data-hub="ops"] {
  --accent:        var(--indigo-600);
  --accent-hover:  var(--indigo-700);
  --accent-active: var(--indigo-800);
  --accent-bg:     rgba(79,70,229,.08);
  --accent-border: rgba(79,70,229,.30);
  --accent-glow:   rgba(79,70,229,.18);
}

/* ── 服务支持象限: 青 (ServiceHub) ── */
[data-theme="dark"][data-hub="service"] {
  --accent:        var(--cyan-500);
  --accent-hover:  var(--cyan-400);
  --accent-active: var(--cyan-600);
  --accent-bg:     rgba(6,182,212,.10);
  --accent-border: rgba(6,182,212,.38);
  --accent-glow:   rgba(6,182,212,.25);
}
[data-theme="light"][data-hub="service"] {
  --accent:        var(--cyan-600);
  --accent-hover:  var(--cyan-700);
  --accent-active: var(--cyan-800);
  --accent-bg:     rgba(8,145,178,.08);
  --accent-border: rgba(8,145,178,.30);
  --accent-glow:   rgba(8,145,178,.18);
}

/* ── 服务支持象限: 青 (ToolsHub — 工具中心) ── */
[data-theme="dark"][data-hub="tools"] {
  --accent:        var(--cyan-500);
  --accent-hover:  var(--cyan-400);
  --accent-active: var(--cyan-600);
  --accent-bg:     rgba(6,182,212,.10);
  --accent-border: rgba(6,182,212,.38);
  --accent-glow:   rgba(6,182,212,.25);
}
[data-theme="light"][data-hub="tools"] {
  --accent:        var(--cyan-600);
  --accent-hover:  var(--cyan-700);
  --accent-active: var(--cyan-800);
  --accent-bg:     rgba(8,145,178,.08);
  --accent-border: rgba(8,145,178,.30);
  --accent-glow:   rgba(8,145,178,.18);
}

/* ════════════════════════════════════════════════════════════════════════
   END — colors.css
   后续添加新 hub: 在 §4 末尾追加块, 主色查 06-hub-color-registry.md
   ════════════════════════════════════════════════════════════════════════ */