@charset "UTF-8";
/* ============================================================
   SkillMesh / 插台 — Design Tokens v1.0
   ------------------------------------------------------------
   本文件是 SkillMesh 全站唯一的设计事实源（single source of truth）。
   所有新增组件必须引用本文件的令牌，禁止硬编码色值/字号/间距。
   迁移路径见 docs/design/DESIGN-SYSTEM.md §12。
   ============================================================ */

:root {
  /* ----------------------------------------------------------
     1. 中性色阶（Zinc — 冷灰，承载"协议基础设施"的冷静感）
     用途：背景 / 文字 / 边框 / 分割线
     ---------------------------------------------------------- */
  --sm-zinc-0: #ffffff;
  --sm-zinc-50: #fafafa;
  --sm-zinc-100: #f4f4f5;
  --sm-zinc-200: #e4e4e7;
  --sm-zinc-300: #d4d4d8;
  --sm-zinc-400: #a1a1aa;
  --sm-zinc-500: #71717a;
  --sm-zinc-600: #52525b;
  --sm-zinc-700: #3f3f46;
  --sm-zinc-800: #27272a;
  --sm-zinc-900: #18181b;
  --sm-zinc-950: #09090b;

  /* ----------------------------------------------------------
     2. 品牌色（Anchor Teal）
     teal-600 = 交互态主色；teal-700 = 图形/文字主色（白底对比度 4.8:1，满足 AA）
     选色依据：与信任向量五语义色（绿/蓝/紫/玫瑰/琥珀）保持足够色相距离，
     避免"品牌色"与"数据语义色"在同一界面互相污染。
     ---------------------------------------------------------- */
  --sm-teal-50: #f0fdfa;
  --sm-teal-100: #ccfbf1;
  --sm-teal-200: #99f6e4;
  --sm-teal-300: #5eead4;
  --sm-teal-400: #2dd4bf;
  --sm-teal-500: #14b8a6;
  --sm-teal-600: #0d9488;
  --sm-teal-700: #0f766e;
  --sm-teal-800: #115e59;
  --sm-teal-900: #134e4a;

  /* 辅助色（用于导出按钮、DSH 安装区等） */
  --sm-violet-600: #7c3aed;
  --sm-violet-700: #6b21a8;
  --sm-violet-soft: #f5f3ff;
  --sm-violet-soft-border: #ddd6fe;
  --sm-violet-hover: #a78bfa;

  /* ----------------------------------------------------------
     3. 语义色 — 五维信任向量（L1）
     仅用于"可信度向量"进度条与其图例，不得挪作品牌用途。
     ---------------------------------------------------------- */
  /* 星级评定的琥珀色。不属于信任向量语义色（信任向量是五维条，
     星级是人类视角的降维摘要），故单列，避免与 --sm-trust-time 混淆。 */
  --sm-amber-500: #f59e0b;

  --sm-trust-source: #059669; /* 源码可验证 — emerald */
  --sm-trust-usage: #2563eb; /* 使用痕迹   — blue    */
  --sm-trust-success: #7c3aed; /* 成功率     — violet  */
  --sm-trust-risk: #e11d48; /* 依赖风险   — rose（负向指标：条越长风险越高） */
  --sm-trust-time: #d97706; /* 时效性     — amber   */

  --sm-trust-source-soft: #d1fae5;
  --sm-trust-usage-soft: #dbeafe;
  --sm-trust-success-soft: #ede9fe;
  --sm-trust-risk-soft: #ffe4e6;
  --sm-trust-time-soft: #fef3c7;

  /* ----------------------------------------------------------
     4. 语义色 — 端点类型（Endpoint Type）
     采用"中性底 + 彩色引导点"形态，避免与信任向量色块冲突。
     ---------------------------------------------------------- */
  --sm-ep-http: #2563eb; /* HTTP      */
  --sm-ep-mcp: #059669; /* MCP       */
  --sm-ep-command: #52525b; /* Command   */
  --sm-ep-prompt: #d97706; /* Prompt    */
  --sm-ep-workflow: #7c3aed; /* Workflow  */

  /* 端点类型 — 浅色底（标签/徽章背景） */
  --sm-ep-http-soft: #dbeafe;
  --sm-ep-mcp-soft: #d1fae5;
  --sm-ep-command-soft: #f4f4f5;
  --sm-ep-prompt-soft: #fef3c7;
  --sm-ep-workflow-soft: #e0e7ff;

  /* ----------------------------------------------------------
     5. 状态色（Feedback）
     ---------------------------------------------------------- */
  --sm-success: #059669;
  --sm-success-bg: #ecfdf5;
  --sm-success-border: #a7f3d0;
  --sm-success-hover: #34d399;
  --sm-warning: #d97706;
  --sm-warning-bg: #fffbeb;
  --sm-warning-border: #fde68a;
  --sm-danger: #dc2626;
  --sm-danger-bg: #fef2f2;
  --sm-info: #2563eb;
  --sm-info-bg: #eff6ff;
  --sm-info-border: #bfdbfe;
  --sm-info-hover: #60a5fa;

  /* ----------------------------------------------------------
     6. 语义化表面 / 文字令牌（Light — 默认）
     ---------------------------------------------------------- */
  --sm-bg-canvas: var(--sm-zinc-50); /* 页面底 */
  --sm-bg-surface: var(--sm-zinc-0); /* 卡片 / 模态框 */
  --sm-bg-subtle: var(--sm-zinc-100); /* 次级填充 / 代码块底色 */
  --sm-bg-muted: var(--sm-zinc-100); /* 悬停填充 */
  --sm-bg-inverse: var(--sm-zinc-900); /* 反色块（Tooltip / 深色按钮） */
  --sm-bg-overlay: rgba(9, 9, 11, 0.4); /* 模态遮罩 */

  --sm-fg-primary: var(--sm-zinc-900); /* 主文字 / 标题 */
  --sm-fg-secondary: var(--sm-zinc-700); /* 正文 */
  --sm-fg-tertiary: var(--sm-zinc-500); /* 辅助 / 说明 */
  --sm-fg-placeholder: var(--sm-zinc-400); /* 占位符 */
  --sm-fg-disabled: var(--sm-zinc-400);
  --sm-fg-on-inverse: var(--sm-zinc-50);
  --sm-fg-accent: var(--sm-teal-700); /* 链接 / 品牌文字 */
  --sm-fg-accent-hover: var(--sm-teal-800);
  /* 实色/深色背景之上的文字。明暗两态恒为白，
     用于 .category-chip.active、主按钮文字等"反白"场景。
     迁移 style.css 时，凡深色底上的 #ffffff 一律用本令牌，
     不可用 --sm-bg-surface（暗色态下会变成深底深字）。 */
  --sm-fg-on-solid: #ffffff;

  --sm-border-subtle: var(--sm-zinc-200); /* 默认边框 */
  --sm-border-strong: var(--sm-zinc-300); /* 悬停 / 输入框 */
  --sm-border-focus: var(--sm-teal-500);

  --sm-brand: var(--sm-teal-700);
  --sm-brand-hover: var(--sm-teal-800);
  --sm-brand-active: var(--sm-teal-900);
  --sm-brand-soft: var(--sm-teal-50);
  --sm-brand-soft-border: var(--sm-teal-200);
  --sm-on-brand: var(--sm-zinc-0);

  --sm-ring: rgba(20, 184, 166, 0.4); /* focus ring */
  --sm-ring-neutral: rgba(24, 24, 27, 0.12); /* 卡片 focus ring */

  /* ----------------------------------------------------------
     7. 字体
     ---------------------------------------------------------- */
  --sm-font-sans:
    "Inter", "Noto Sans SC", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --sm-font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;

  /* 字号阶梯（4px 栅格友好 / 1.20–1.25 比例） */
  --sm-text-display: 3rem; /* 48px  Hero 标题（桌面） */
  --sm-text-h1: 2.25rem; /* 36px */
  --sm-text-h2: 1.5rem; /* 24px */
  --sm-text-h3: 1.25rem; /* 20px */
  --sm-text-h4: 1rem; /* 16px */
  --sm-text-lg: 1.125rem; /* 18px */
  --sm-text-base: 1rem; /* 16px */
  --sm-text-sm: 0.875rem; /* 14px */
  --sm-text-xs: 0.8125rem; /* 13px */
  --sm-text-caption: 0.75rem; /* 12px */
  --sm-text-overline: 0.6875rem; /* 11px */

  /* 行高 */
  --sm-lh-tight: 1.2;
  --sm-lh-snug: 1.35;
  --sm-lh-normal: 1.6;
  --sm-lh-relaxed: 1.75;

  /* 字重 */
  --sm-fw-light: 300;
  --sm-fw-regular: 400;
  --sm-fw-medium: 500;
  --sm-fw-semibold: 600;
  --sm-fw-bold: 700;

  /* 字距 */
  --sm-ls-tight: -0.02em; /* 大标题 */
  --sm-ls-normal: 0;
  --sm-ls-wide: 0.02em; /* 标签 */
  --sm-ls-overline: 0.06em; /* 全大写小标签 */

  /* ----------------------------------------------------------
     8. 间距（4px 基准）
     ---------------------------------------------------------- */
  --sm-space-0: 0;
  --sm-space-1: 0.25rem; /*  4px */
  --sm-space-2: 0.5rem; /*  8px */
  --sm-space-3: 0.75rem; /* 12px */
  --sm-space-4: 1rem; /* 16px */
  --sm-space-5: 1.25rem; /* 20px */
  --sm-space-6: 1.5rem; /* 24px */
  --sm-space-8: 2rem; /* 32px */
  --sm-space-10: 2.5rem; /* 40px */
  --sm-space-12: 3rem; /* 48px */
  --sm-space-16: 4rem; /* 64px */
  --sm-space-20: 5rem; /* 80px */

  /* 布局常量 */
  --sm-container-max: 72rem; /* 1152px — 与现有 .main-container 一致 */
  --sm-container-pad: var(--sm-space-6); /* 24px */
  --sm-container-pad-sm: var(--sm-space-4); /* 16px（≤640px） */
  --sm-grid-gap: var(--sm-space-5); /* 20px — 卡片网格间距 */
  --sm-navbar-height: 4rem; /* 64px */

  /* ----------------------------------------------------------
     9. 圆角
     ---------------------------------------------------------- */
  --sm-radius-xs: 0.25rem; /*  4px 标签 / 徽章 */
  --sm-radius-sm: 0.375rem; /*  6px 内联代码块 */
  --sm-radius-md: 0.5rem; /*  8px 输入框 / 按钮 */
  --sm-radius-lg: 0.75rem; /* 12px 卡片 */
  --sm-radius-xl: 1rem; /* 16px 模态框 / 面板 */
  --sm-radius-full: 9999px; /* 胶囊 / 头像 */

  /* ----------------------------------------------------------
     10. 阴影（冷调低饱和 / 大扩散）
     ---------------------------------------------------------- */
  --sm-shadow-xs: 0 1px 2px rgba(9, 9, 11, 0.04);
  --sm-shadow-sm:
    0 1px 3px rgba(9, 9, 11, 0.06), 0 1px 2px rgba(9, 9, 11, 0.04);
  --sm-shadow-md:
    0 4px 12px rgba(9, 9, 11, 0.06), 0 2px 4px rgba(9, 9, 11, 0.04);
  --sm-shadow-lg:
    0 12px 32px rgba(9, 9, 11, 0.08), 0 4px 8px rgba(9, 9, 11, 0.04);
  --sm-shadow-xl:
    0 24px 56px rgba(9, 9, 11, 0.14), 0 8px 16px rgba(9, 9, 11, 0.06);
  --sm-shadow-ring-brand: 0 0 0 3px var(--sm-ring);
  --sm-shadow-ring-neutral: 0 0 0 3px var(--sm-ring-neutral);

  /* ----------------------------------------------------------
     11. 动效
     ---------------------------------------------------------- */
  --sm-dur-instant: 80ms;
  --sm-dur-fast: 150ms;
  --sm-dur-base: 200ms;
  --sm-dur-slow: 300ms;
  --sm-dur-slower: 500ms;

  --sm-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --sm-ease-decelerate: cubic-bezier(0, 0, 0.2, 1);
  --sm-ease-accelerate: cubic-bezier(0.4, 0, 1, 1);
  --sm-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); /* 仅用于模态框入场 */

  /* ----------------------------------------------------------
     12. 层级
     ---------------------------------------------------------- */
  --sm-z-base: 0;
  --sm-z-sticky: 40; /* 导航栏 */
  --sm-z-overlay: 50; /* 模态遮罩 */
  --sm-z-modal: 60; /* 模态内容 */
  --sm-z-toast: 70;

  /* ----------------------------------------------------------
     13. 代码块（深色容器 — 明暗模式下保持深色，符合开发者习惯）
     ---------------------------------------------------------- */
  --sm-code-bg: #1e293b;
  --sm-code-fg: #e2e8f0;
}

/* ============================================================
   Dark Theme — 可选（技术债 🟢「无暗色模式」的清偿方案）
   启用方式：<html data-theme="dark">
   未显式声明时，跟随系统偏好。
   ============================================================ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --sm-bg-canvas: var(--sm-zinc-950);
    --sm-bg-surface: var(--sm-zinc-900);
    --sm-bg-subtle: var(--sm-zinc-800);
    --sm-bg-muted: var(--sm-zinc-800);
    --sm-bg-inverse: var(--sm-zinc-100);
    --sm-bg-overlay: rgba(0, 0, 0, 0.6);

    --sm-fg-primary: var(--sm-zinc-50);
    --sm-fg-secondary: var(--sm-zinc-300);
    --sm-fg-tertiary: var(--sm-zinc-400);
    --sm-fg-placeholder: var(--sm-zinc-500);
    --sm-fg-disabled: var(--sm-zinc-600);
    --sm-fg-on-inverse: var(--sm-zinc-900);
    --sm-fg-accent: var(--sm-teal-400);
    --sm-fg-accent-hover: var(--sm-teal-300);

    --sm-border-subtle: var(--sm-zinc-800);
    --sm-border-strong: var(--sm-zinc-700);
    --sm-border-focus: var(--sm-teal-400);

    --sm-brand: var(--sm-teal-600);
    --sm-brand-hover: var(--sm-teal-500);
    --sm-brand-active: var(--sm-teal-400);
    --sm-brand-soft: rgba(13, 148, 136, 0.14);
    --sm-brand-soft-border: var(--sm-teal-800);
    --sm-on-brand: var(--sm-zinc-0);

    --sm-ring: rgba(45, 212, 191, 0.45);
    --sm-ring-neutral: rgba(250, 250, 250, 0.18);

    --sm-trust-source: #34d399;
    --sm-trust-usage: #60a5fa;
    --sm-trust-success: #a78bfa;
    --sm-trust-risk: #fb7185;
    --sm-trust-time: #fbbf24;

    --sm-trust-source-soft: rgba(52, 211, 153, 0.16);
    --sm-trust-usage-soft: rgba(96, 165, 250, 0.16);
    --sm-trust-success-soft: rgba(167, 139, 250, 0.16);
    --sm-trust-risk-soft: rgba(251, 113, 133, 0.16);
    --sm-trust-time-soft: rgba(251, 191, 36, 0.16);

    --sm-shadow-lg:
      0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
    --sm-shadow-xl:
      0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.4);

    --sm-code-bg: #0b1220;
    --sm-code-fg: #e2e8f0;
  }
}

:root[data-theme="dark"] {
  --sm-bg-canvas: var(--sm-zinc-950);
  --sm-bg-surface: var(--sm-zinc-900);
  --sm-bg-subtle: var(--sm-zinc-800);
  --sm-bg-muted: var(--sm-zinc-800);
  --sm-bg-inverse: var(--sm-zinc-100);
  --sm-bg-overlay: rgba(0, 0, 0, 0.6);

  --sm-fg-primary: var(--sm-zinc-50);
  --sm-fg-secondary: var(--sm-zinc-300);
  --sm-fg-tertiary: var(--sm-zinc-400);
  --sm-fg-placeholder: var(--sm-zinc-500);
  --sm-fg-disabled: var(--sm-zinc-600);
  --sm-fg-on-inverse: var(--sm-zinc-900);
  --sm-fg-accent: var(--sm-teal-400);
  --sm-fg-accent-hover: var(--sm-teal-300);

  --sm-border-subtle: var(--sm-zinc-800);
  --sm-border-strong: var(--sm-zinc-700);
  --sm-border-focus: var(--sm-teal-400);

  --sm-brand: var(--sm-teal-600);
  --sm-brand-hover: var(--sm-teal-500);
  --sm-brand-active: var(--sm-teal-400);
  --sm-brand-soft: rgba(13, 148, 136, 0.14);
  --sm-brand-soft-border: var(--sm-teal-800);
  --sm-on-brand: var(--sm-zinc-0);

  --sm-ring: rgba(45, 212, 191, 0.45);
  --sm-ring-neutral: rgba(250, 250, 250, 0.18);

  --sm-trust-source: #34d399;
  --sm-trust-usage: #60a5fa;
  --sm-trust-success: #a78bfa;
  --sm-trust-risk: #fb7185;
  --sm-trust-time: #fbbf24;

  --sm-trust-source-soft: rgba(52, 211, 153, 0.16);
  --sm-trust-usage-soft: rgba(96, 165, 250, 0.16);
  --sm-trust-success-soft: rgba(167, 139, 250, 0.16);
  --sm-trust-risk-soft: rgba(251, 113, 133, 0.16);
  --sm-trust-time-soft: rgba(251, 191, 36, 0.16);

  --sm-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
  --sm-shadow-xl:
    0 24px 56px rgba(0, 0, 0, 0.65), 0 8px 16px rgba(0, 0, 0, 0.4);

  --sm-code-bg: #0b1220;
  --sm-code-fg: #e2e8f0;
}

/* ============================================================
   无障碍 — 尊重"减少动态效果"系统偏好
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  :root {
    --sm-dur-instant: 0ms;
    --sm-dur-fast: 0ms;
    --sm-dur-base: 0ms;
    --sm-dur-slow: 0ms;
    --sm-dur-slower: 0ms;
  }
}