/* ==========================================================================
   design-tokens.css  |  「6」v7.0 自托管全栈应用平台
   --------------------------------------------------------------------------
   生成来源：SPEC-v7 第 8 章（锁定基线） + Phase 1 设计方向报告 v1.0（颜好看）
   版本    ：1.1.0（Phase 1 草案 1.0.0 正式化为 Phase 2 交付物）
   消费方  ：Phase 3 前端全站模板（Jinja2 SSR），base.html <head> 引入
   同源文件：docs/design/design-tokens.json（primitive / semantic / component
             四层映射，语义色值与本文件一一对应，改一处必须同步另一处）
   纪律    ：
     P0-1 图标仅 Lucide SVG，16/20/24px 三档，禁 emoji 功能图标
     P0-2 唯一受控渐变 = --ai-identity-gradient（AI 标识 1-2px 细线，
           每屏至多 1 处；v7.0 无 AI 功能，Token 预留）
     P0-3 组件层零硬编码 hex（唯一例外 #fff / #000），一律 var(--*) 引用；
           本文件中的字面量只允许出现在 Token 定义层
   ========================================================================== */

/* --------------------------------------------------------------------------
   主题初始化机制（与 base.html <head> 内联脚本协同，防首帧主题闪烁）：
   1. 内联脚本在首帧前写 data-theme：localStorage('six_theme') 优先，
      否则 matchMedia('(prefers-color-scheme: dark)').matches 决定；
   2. 本文件 :root 承载暗色默认值（Spec：暗色默认 + 亮色可选 + 跟随系统）；
   3. [data-theme="light"] 为显式亮色；JS 禁用且系统偏好亮色时，由文件末尾
      @media (prefers-color-scheme: light) 的 :root:not([data-theme]) 兜底，
      取值与 [data-theme="light"] 完全一致（改一处必须同步另一处）。
   -------------------------------------------------------------------------- */

/* ==========================================================================
   结构层 Token（主题无关）：字体 / 字号 10 级 / 行高 / 字距 / 字重 /
   间距 / 圆角 / 阴影(flat/ring) / z-index / 动效 / 布局
   ========================================================================== */
:root {
  /* ---- 字体（Geist + Noto Sans SC + JetBrains Mono，自托管 /static/fonts/） ---- */
  --font-display: "Geist", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-body: "Geist", "Noto Sans SC", -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* ---- 字号 10 级（Spec 锁定 11/12/13/14/16/18/20/24/32/40px） ---- */
  --text-2xs: 0.6875rem;    /* 11px 徽标 / 状态点旁注 / 表格密集元数据 */
  --text-xs: 0.75rem;       /* 12px 日志时间戳 / diff 行 / 次级元数据 */
  --text-sm: 0.8125rem;     /* 13px 表单 helper / 次级正文 */
  --text-base: 0.875rem;    /* 14px 正文基准（Product 寄存器 desktop-first） */
  --text-md: 1rem;          /* 16px 卡片标题 / 强调正文 */
  --text-lg: 1.125rem;      /* 18px 区块标题 */
  --text-xl: 1.25rem;       /* 20px 页面标题 */
  --text-2xl: 1.5rem;       /* 24px 工作台大标题 */
  --text-3xl: 2rem;         /* 32px Onboarding 主标题 */
  --text-4xl: 2.5rem;       /* 40px 营销页主标题（既有页迁移专用） */

  /* ---- 行高 ---- */
  --leading-none: 1;
  --leading-tight: 1.25;    /* 标题 */
  --leading-body: 1.5;      /* 正文 */
  --leading-mono: 1.6;      /* 日志 / 代码 / diff */

  /* ---- 字距 ---- */
  --tracking-body: 0;
  --tracking-caps: 0.06em;      /* ALL CAPS 必须 >= 0.06em */
  --tracking-display: -0.02em;  /* >= 32px 展示标题负字距 */

  /* ---- 字重三级（Spec 锁定 400/500/600） ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  /* ---- 间距（4px 基频，禁 5/7/13/15/22/30 等非标值） ---- */
  --space-px: 1px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ---- 圆角（Spec 锁定 8/12/16/pill） ---- */
  --radius-sm: 8px;       /* 按钮 / 输入框 / 徽标 */
  --radius-md: 12px;      /* 卡片 */
  --radius-lg: 16px;      /* 弹窗 / 命令面板 */
  --radius-pill: 9999px;

  /* ---- 阴影（flat/ring 主题无关；raised/modal 随主题见下方语义层） ---- */
  --shadow-flat: none;
  --shadow-ring: 0 0 0 1px var(--border);

  /* ---- z-index 八级（base -> toast 700，Spec 锁定） ---- */
  --z-base: 0;
  --z-sticky: 100;
  --z-sidebar: 200;
  --z-topbar: 300;
  --z-dropdown: 400;
  --z-drawer: 500;
  --z-modal: 600;
  --z-toast: 700;

  /* ---- 动效（收敛值 150ms；禁弹性缓动） ---- */
  --duration-fast: 100ms;     /* 即时反馈：按下 / 开关 */
  --duration-base: 150ms;     /* 确认操作：hover / 选中（收敛值） */
  --duration-slow: 200ms;     /* 内容进入：下拉 / toast */
  --duration-slower: 300ms;   /* 跨屏：抽屉 / 模态 */
  --duration-slowest: 400ms;  /* 复杂：命令面板展开 */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-linear: linear;

  /* ---- 布局 ---- */
  --container-max: 1280px;
  --sidebar-width: 220px;
  --sidebar-width-collapsed: 56px;
  --file-tree-width: 240px;
  --info-panel-width: 280px;
  --topbar-height: 48px;
  --tabbar-height: 56px;
  --touch-target: 44px;       /* WCAG 2.5.5 最小触控目标 */
  --gutter-desktop: 24px;
  --gutter-tablet: 16px;
  --gutter-phone: 12px;
  --section-y-desktop: 80px;
  --section-y-tablet: 48px;
  --section-y-phone: 32px;

  /* ---- P0-2 唯一受控渐变例外：AI 生成内容标识细线 ----
     v7.0 无 AI 功能，Token 预留；使用时仅限 1-2px 细线、每屏 <= 1 处，
     禁装饰 / 禁发光 / 禁毛玻璃三位一体。 ---- */
  --ai-identity-gradient: linear-gradient(90deg, #4C8DFF, #3FB950);
}

/* ==========================================================================
   语义层 Token — 暗色（默认主题）
   色彩配比：中性色 70-90% / 强调色 5-10% / 语义色 0-5% / 效果色 < 1%
   每屏 accent 可见使用 <= 2 处（CTA / 选中态 / 关键数据高亮）
   ========================================================================== */
:root,
[data-theme="dark"] {
  /* 表面层 */
  --bg: #0B0D11;
  --surface: #12151C;
  --surface-warm: #1A1F29;      /* hover / 选中中性面 */
  --surface-sunken: #090B0E;    /* 内嵌区域：编辑器 / 日志 / diff 容器 */

  /* 前景层 */
  --fg: #E9EDF4;
  --fg-2: #C7CEDA;              /* 次级正文（on bg 12.3:1） */
  --muted: #8A93A6;             /* 副文本（on bg 6.9:1） */
  --meta: #767F92;              /* 三级元数据（on bg 4.8:1，仍达 AA） */

  /* 边框层 */
  --border: #262C38;
  --border-soft: #1C212B;       /* 行内分隔线 */

  /* 强调层（定制 Prussian Blue，暗色） */
  --accent: #4C8DFF;
  --accent-text: #4C8DFF;             /* 链接 / 强调文字（on bg 6.1:1） */
  --accent-on: #FFFFFF;               /* accent 实底上的前景 */
  --accent-solid: #2E6BDB;            /* 主按钮实底（on #2E6BDB 白字 5.0:1） */
  --accent-solid-hover: #4C8DFF;
  --accent-solid-active: #275FBF;
  --accent-soft: rgba(76, 141, 255, 0.14);   /* 选中项底纹 / 分段控件激活态 */

  /* 语义色（暗色） */
  --success: #3FB950;
  --success-text: #3FB950;             /* on bg 7.7:1 */
  --success-soft: rgba(63, 185, 80, 0.14);
  --warn: #D29922;
  --warn-text: #D29922;                /* on bg 7.7:1 */
  --warn-soft: rgba(210, 153, 34, 0.14);
  --danger: #F85149;
  --danger-text: #F85149;              /* on bg 5.8:1 */
  --danger-soft: rgba(248, 81, 73, 0.14);
  --danger-ring: rgba(248, 81, 73, 0.35);  /* 输入框错误焦点环 */
  --danger-solid: #B33230;             /* 危险按钮实底（白字 6.2:1） */
  --danger-solid-hover: #C6413F;
  --danger-solid-active: #962725;

  /* 状态点语言（queued 石墨 / building 琥珀脉冲 / ready 绿 / error 红 / canceled 暗石墨） */
  --status-queued: #8A93A6;
  --status-building: #D29922;
  --status-ready: #3FB950;
  --status-error: #F85149;
  --status-canceled: #5C6577;

  /* diff（暗色） */
  --diff-add: #3FB950;
  --diff-del: #F85149;
  --diff-add-bg: rgba(63, 185, 80, 0.12);
  --diff-del-bg: rgba(248, 81, 73, 0.12);
  --diff-hunk-bg: #171C26;
  --diff-hunk-fg: #8A93A6;

  /* 焦点与层级 */
  --focus-ring: rgba(76, 141, 255, 0.45);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.40), 0 4px 12px rgba(0, 0, 0, 0.32);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.56);
  --overlay: rgba(4, 6, 10, 0.66);
  --topbar-bg: rgba(11, 13, 17, 0.82);   /* 功能目的：sticky 顶栏滚动穿透 */

  /* 骨架屏（Loading 态） */
  --skeleton-base: #161B24;
  --skeleton-shine: #1F2632;

  /* 滚动条（日志 / 代码长内容） */
  --scrollbar-thumb: #2A3140;
}

/* ==========================================================================
   语义层 Token — 亮色（与暗色同 QA 标准：对比度 / 9 态 / 动效全量对等）
   ========================================================================== */
[data-theme="light"] {
  /* 表面层 */
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-warm: #F0F2F6;
  --surface-sunken: #EBEDF2;

  /* 前景层 */
  --fg: #131720;
  --fg-2: #3A4356;              /* on bg 9.2:1 */
  --muted: #5A6478;             /* on bg 5.5:1 */
  --meta: #67707F;              /* on bg 4.6:1，仍达 AA */

  /* 边框层 */
  --border: #DFE3EB;
  --border-soft: #E9ECF2;

  /* 强调层（定制 Prussian Blue，亮色） */
  --accent: #1A56DB;
  --accent-text: #1A56DB;             /* on bg 5.7:1 */
  --accent-on: #FFFFFF;               /* on #1A56DB 白字 6.1:1 */
  --accent-solid: #1A56DB;
  --accent-solid-hover: #1748B8;
  --accent-solid-active: #143D99;
  --accent-soft: rgba(26, 86, 219, 0.10);

  /* 语义色（亮色；*-text 为 AA 校验后的文字变体） */
  --success: #16A34A;
  --success-text: #15803D;            /* on surface 5.0:1 */
  --success-soft: rgba(22, 163, 74, 0.10);
  --warn: #D97706;
  --warn-text: #B45309;               /* on surface 5.0:1 */
  --warn-soft: rgba(217, 119, 6, 0.10);
  --danger: #DC2626;
  --danger-text: #DC2626;             /* on surface 4.8:1 */
  --danger-soft: rgba(220, 38, 38, 0.08);
  --danger-ring: rgba(220, 38, 38, 0.25);
  --danger-solid: #DC2626;
  --danger-solid-hover: #B91C1C;
  --danger-solid-active: #991B1B;

  /* 状态点语言（与暗色同语义，取值按亮色底调校） */
  --status-queued: #5A6478;
  --status-building: #D97706;
  --status-ready: #16A34A;
  --status-error: #DC2626;
  --status-canceled: #7D8798;

  /* diff（亮色） */
  --diff-add: #1A7F37;
  --diff-del: #CF222E;
  --diff-add-bg: rgba(26, 127, 55, 0.10);
  --diff-del-bg: rgba(207, 34, 46, 0.08);
  --diff-hunk-bg: #F0F2F6;
  --diff-hunk-fg: #5A6478;

  /* 焦点与层级 */
  --focus-ring: rgba(26, 86, 219, 0.35);
  --shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
  --shadow-modal: 0 16px 48px rgba(16, 24, 40, 0.16);
  --overlay: rgba(19, 23, 32, 0.44);
  --topbar-bg: rgba(247, 248, 250, 0.85);

  /* 骨架屏 */
  --skeleton-base: #EDF0F4;
  --skeleton-shine: #F7F9FB;

  /* 滚动条 */
  --scrollbar-thumb: #C9CFDA;
}

/* --------------------------------------------------------------------------
   JS 禁用 + 系统偏好亮色 的兜底（取值与 [data-theme="light"] 一致，
   修改时必须同步；显式 data-theme 永远优先于本块）
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --bg: #F7F8FA;
    --surface: #FFFFFF;
    --surface-warm: #F0F2F6;
    --surface-sunken: #EBEDF2;
    --fg: #131720;
    --fg-2: #3A4356;
    --muted: #5A6478;
    --meta: #67707F;
    --border: #DFE3EB;
    --border-soft: #E9ECF2;
    --accent: #1A56DB;
    --accent-text: #1A56DB;
    --accent-on: #FFFFFF;
    --accent-solid: #1A56DB;
    --accent-solid-hover: #1748B8;
    --accent-solid-active: #143D99;
    --accent-soft: rgba(26, 86, 219, 0.10);
    --success: #16A34A;
    --success-text: #15803D;
    --success-soft: rgba(22, 163, 74, 0.10);
    --warn: #D97706;
    --warn-text: #B45309;
    --warn-soft: rgba(217, 119, 6, 0.10);
    --danger: #DC2626;
    --danger-text: #DC2626;
    --danger-soft: rgba(220, 38, 38, 0.08);
    --danger-ring: rgba(220, 38, 38, 0.25);
    --danger-solid: #DC2626;
    --danger-solid-hover: #B91C1C;
    --danger-solid-active: #991B1B;
    --status-queued: #5A6478;
    --status-building: #D97706;
    --status-ready: #16A34A;
    --status-error: #DC2626;
    --status-canceled: #7D8798;
    --diff-add: #1A7F37;
    --diff-del: #CF222E;
    --diff-add-bg: rgba(26, 127, 55, 0.10);
    --diff-del-bg: rgba(207, 34, 46, 0.08);
    --diff-hunk-bg: #F0F2F6;
    --diff-hunk-fg: #5A6478;
    --focus-ring: rgba(26, 86, 219, 0.35);
    --shadow-raised: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.08);
    --shadow-modal: 0 16px 48px rgba(16, 24, 40, 0.16);
    --overlay: rgba(19, 23, 32, 0.44);
    --topbar-bg: rgba(247, 248, 250, 0.85);
    --skeleton-base: #EDF0F4;
    --skeleton-shine: #F7F9FB;
    --scrollbar-thumb: #C9CFDA;
  }
}

/* ==========================================================================
   统一焦点环（全站唯一焦点样式，见 DESIGN.md 第 7 节）
   所有可交互元素 keyboard focus 时：box-shadow: 0 0 0 3px var(--focus-ring)
   组件可扩展布局（如偏移量），但不得更改颜色与 3px 宽度，不得移除。
   ========================================================================== */
:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* ==========================================================================
   prefers-reduced-motion 全量降级（Spec 锁定）
   - 所有 duration Token 收敛为 1ms
   - 全局动画 / 过渡压到 1ms 且不循环
   - building 状态点的呼吸脉冲降级为静态琥珀（组件层实现）
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
    --duration-slower: 1ms;
    --duration-slowest: 1ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}