/* ============================================================================= * tokens.css · V4 唯一色值 / 尺寸 / 字体来源 * ----------------------------------------------------------------------------- * 来源一：DSH（DeepSeek Harness）客户端主题 @deepseek-ai/dsh-client-ui-theme， * 共 403 个 --dsw-* token（.qa-shots/dsh-tokens.txt），原样搬运。 * 来源二：docs/design/v4-design-system.md §2 色彩 / §3 字体 / §4 圆角与阴影 / §5 焦点， * 以及 docs/design/v4-pages.md 的逐面数值。 * 冲突处理：设计文档表格的显式值 > DSH 原值（契约 §4），覆盖处均有「覆盖：」注释。 * * 使用约定（全队）： * 1. 除本文件外，任何 CSS/JS 不得出现十六进制、rgb()、hsl() 颜色字面量； * app.css / chat.css / panels.css / views.css 一律引用 --dsw-* 或 --v4-*。 * 2. --v4-* 是 V4 语义别名：壳层尺寸、表面色、状态色、圆角、阴影、字号。 * 新组件优先用 --v4-*；需要更细的 DSH 原 token 时可直接用 --dsw-*。 * 3. 暗色主题（预留）：在 body[data-ds-dark-theme] 下重映射 --dsw-alias-* 即可， * 组件样式不需要改。 * ========================================================================== */ :root { color-scheme: light; /* =========================================================================== * 1. 字体栈（设计 §3） * ========================================================================= */ --dsh-font-family-text-default: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; --ds-font-family-text: var(--dsh-font-family-text-default); --ds-font-family-code: "SF Mono", "JetBrains Mono", "Fira Code", Consolas, Menlo, "PingFang SC", "Microsoft YaHei", monospace; /* =========================================================================== * 2. DSH token 全集（403 个 --dsw-*，含设计文档覆盖） * ========================================================================= */ --dsw-alias-bg-base: var(--dsw-static-neutral-bluish-00); --dsw-alias-bg-document-preview: var(--dsw-static-neutral-bluish-100); --dsw-alias-bg-document-selection: color-mix(in srgb, var(--dsw-static-blue-500) 40%, transparent); --dsw-alias-bg-layer-1: var(--dsw-static-neutral-bluish-00); --dsw-alias-bg-layer-2: var(--dsw-static-neutral-bluish-00); --dsw-alias-bg-layer-3: var(--dsw-static-neutral-bluish-00); --dsw-alias-bg-mask-1: #0000003d; --dsw-alias-bg-mask-2: #0000001f; --dsw-alias-bg-mask-3: #0000007a; --dsw-alias-bg-mask-drop: #ffffffb3; --dsw-alias-bg-mask-photo: #000000e0; --dsw-alias-bg-module-platform: var(--dsw-static-neutral-bluish-200); /* 覆盖：设计 §2.2 标签条/工具条 #e1e5ee（DSH 原值 neutral-bluish-60） */ --dsw-alias-bg-multi-select: var(--dsw-static-neutral-bluish-60); --dsw-alias-bg-overlay: var(--dsw-static-neutral-bluish-150); --dsw-alias-bg-skeleton: #0000000a; --dsw-alias-border-inverted: #0000; --dsw-alias-border-inverted2: #0000; --dsw-alias-border-l1: #0000000a; --dsw-alias-border-l2: #0000001a; --dsw-alias-border-l2-darkmode-thin: #0000001a; --dsw-alias-border-l3: #0000001f; --dsw-alias-border-l4: #00000029; --dsw-alias-brand-primary: var(--dsw-static-neutral-bluish-1000); --dsw-alias-brand-primary-invert: var(--dsw-static-neutral-bluish-1000); --dsw-alias-brand-primary-new-colorprimary-new-color: #4176e6; --dsw-alias-brand-text: var(--dsw-static-neutral-bluish-1000); --dsw-alias-button-contrast-fill: var(--dsw-static-neutral-bluish-700); --dsw-alias-button-elevated-fill: var(--dsw-static-neutral-bluish-00); --dsw-alias-button-floating-fill: var(--dsw-static-neutral-bluish-00); --dsw-alias-button-floating-hover: var(--dsw-static-neutral-bluish-75); --dsw-alias-button-ghost-active-border: var(--dsw-static-neutral-bluish-500); --dsw-alias-button-ghost-active-fill: var(--dsw-static-neutral-bluish-100); --dsw-alias-button-ghost-active-hover: var(--dsw-static-neutral-bluish-150); --dsw-alias-button-info-fill: var(--dsw-static-deepseek-500); --dsw-alias-button-info-hover: var(--dsw-static-deepseek-400); --dsw-alias-button-primary-dimmed: var(--dsw-static-neutral-bluish-100); --dsw-alias-button-primary-fill: var(--dsw-alias-brand-primary); --dsw-alias-button-primary-hover: var(--dsw-static-neutral-bluish-750); --dsw-alias-button-tool-bar-fill: #54555780; --dsw-alias-button-tool-bar-fill-invisible: #1f1f1f5c; --dsw-alias-button-tool-bar-hover: #54555799; --dsw-alias-code-diff-added: var(--dsw-static-green-500-a08); --dsw-alias-code-diff-deleted: var(--dsw-static-red-600-a08); --dsw-alias-file-diff-added-bg: #e6f4e7; --dsw-alias-file-diff-added-gutter: #edf7ed; --dsw-alias-file-diff-added-marker: #01a241; --dsw-alias-file-diff-deleted-bg: #fce6e2; --dsw-alias-file-diff-deleted-gutter: #fdece9; --dsw-alias-file-diff-deleted-marker: #ba2723; --dsw-alias-interactive-bg-active: #2631481a; --dsw-alias-interactive-bg-hover: #2631480f; --dsw-alias-interactive-bg-hover-accent: #26314824; --dsw-alias-interactive-bg-hover-danger: #ec13130d; --dsw-alias-interactive-bg-hover-solid: var(--dsw-static-neutral-bluish-75); --dsw-alias-label-caption: var(--dsw-static-neutral-bluish-400); --dsw-alias-label-deep-diving: color-mix(in srgb, var(--dsw-static-deepseek-500) 70%, var(--dsw-static-blue-950)); --dsw-alias-label-deep-diving-shimmer: color-mix(in srgb, var(--dsw-static-deepseek-500) 30%, var(--dsw-static-blue-950)); --dsw-alias-label-dimmed: var(--dsw-static-neutral-bluish-200); --dsw-alias-label-document-preview: var(--dsw-static-neutral-bluish-700); --dsw-alias-label-primary: var(--dsw-static-neutral-bluish-1000); --dsw-alias-label-primary-bluish: var(--dsw-static-blue-900); --dsw-alias-label-primary-dimmed: var(--dsw-static-neutral-bluish-950); --dsw-alias-label-primary-foreground: var(--dsw-static-neutral-bluish-00); --dsw-alias-label-primary-inverted: var(--dsw-static-neutral-bluish-00); --dsw-alias-label-secondary: var(--dsw-static-neutral-bluish-700); --dsw-alias-label-shimmer: color-mix(in srgb, var(--dsw-static-neutral-1000) 30%, transparent); --dsw-alias-label-tertiary: var(--dsw-static-neutral-bluish-600); --dsw-alias-link: var(--dsw-static-deepseek-500); --dsw-alias-markdown-citation: var(--dsw-static-neutral-bluish-100); --dsw-alias-markdown-code-block: var(--dsw-static-neutral-bluish-50); --dsw-alias-markdown-code-block-banner: var(--dsw-static-neutral-bluish-50); --dsw-alias-markdown-code-segment-selected: var(--dsw-static-neutral-bluish-00); --dsw-alias-markdown-code-segment-unselected: var(--dsw-static-neutral-bluish-75); --dsw-alias-markdown-inline-code: var(--dsw-static-neutral-50); --dsw-alias-markdown-placeholder: var(--dsw-static-neutral-bluish-60); --dsw-alias-markdown-tag: var(--dsw-static-neutral-bluish-75); --dsw-alias-menu-group-header-fill: #f8f9faf0; --dsw-alias-menu-icon: var(--dsw-static-neutral-bluish-800); --dsw-alias-onboarding-accent: #3964fe; --dsw-alias-onboarding-card-fill: color-mix(in srgb, var(--dsw-static-neutral-bluish-00) 80%, transparent); --dsw-alias-onboarding-checkbox-border: color-mix(in srgb, var(--dsw-static-neutral-bluish-1000) 20%, transparent); --dsw-alias-onboarding-secondary-fill: var(--dsw-static-neutral-bluish-00); --dsw-alias-scrollbar-bg-l1: var(--dsw-static-neutral-200); --dsw-alias-scrollbar-bg-l2: var(--dsw-static-neutral-200); --dsw-alias-scrollbar-hover-l1: var(--dsw-static-neutral-300); --dsw-alias-scrollbar-hover-l2: var(--dsw-static-neutral-300); --dsw-alias-settings-card-fill: var(--dsw-alias-bg-layer-2); --dsw-alias-settings-card-stroke: var(--dsw-alias-border-l4); --dsw-alias-state-business-primary: var(--dsw-static-deepseek-500); --dsw-alias-state-business-tertiary: var(--dsw-static-deepseek-100); --dsw-alias-state-error-primary: #dc2626; /* 覆盖：设计 §2.2/§6 错误红 #dc2626（DSH 原值 red-600 #ec1313） */ --dsw-alias-state-error-secondary: var(--dsw-static-red-400); --dsw-alias-state-idle-primary: var(--dsw-static-neutral-300); --dsw-alias-state-success-primary: var(--dsw-static-green-500); --dsw-alias-state-success-secondary: var(--dsw-static-green-400); --dsw-alias-state-success-tertiary: var(--dsw-static-green-100); --dsw-alias-state-warn-label: var(--dsw-static-amber-600); --dsw-alias-state-warn-primary: var(--dsw-static-amber-500); --dsw-alias-state-warn-secondary: var(--dsw-static-amber-400); --dsw-alias-state-warn-tertiary: var(--dsw-static-amber-100); --dsw-alias-switch-thumb: var(--dsw-static-neutral-bluish-00); --dsw-alias-toast-bg: var(--dsw-static-neutral-bluish-800); --dsw-alias-toast-label: var(--dsw-static-neutral-bluish-00); --dsw-alias-tooltip-bg: var(--dsw-static-neutral-bluish-850); --dsw-alias-tooltip-key-bg: color-mix(in srgb, var(--dsw-alias-tooltip-bg), white 18%); --dsw-alias-turn-trigger-bg: var(--dsw-alias-markdown-code-block); --dsw-alias-turn-trigger-bg-hover: var(--dsw-alias-interactive-bg-hover); --dsw-corner-shape: superellipse(1.5); --dsw-elevation-panel: var(--dsw-elevation-stroke), 0 3px 8px 0 #00000008, 0 0 16px 0 #00000005; --dsw-elevation-prominent: var(--dsw-elevation-stroke), 0 3px 8px 0 #0000000a, 0 0 20px 0 #0000000d; --dsw-elevation-soft: var(--dsw-elevation-stroke), 0 4px 16px 0 #00000008, 0 0 24px 0 #00000008; --dsw-elevation-stroke: 0 0 0 .5px var(--dsw-elevation-stroke-color); --dsw-elevation-stroke-color: var(--dsw-alias-border-l4); --dsw-focus-ring-color: var(--dsw-alias-state-business-primary); /* 覆盖：设计 §5 焦点环 2px #4176e6（DSH 原值 transparent，改用 box-shadow 绘制） */ --dsw-focus-ring-width: 2px; --dsw-font-base-16: 16px/24px var(--dsw-font-family); --dsw-font-base-16-font-family: var(--dsw-font-family); --dsw-font-base-16-font-size: 16px; --dsw-font-base-16-font-style: normal; --dsw-font-base-16-font-weight: 400; --dsw-font-base-16-line-height: 24px; --dsw-font-base-strong-16: 500 16px/24px var(--dsw-font-family); --dsw-font-base-strong-16-font-family: var(--dsw-font-family); --dsw-font-base-strong-16-font-size: 16px; --dsw-font-base-strong-16-font-style: normal; --dsw-font-base-strong-16-font-weight: 500; --dsw-font-base-strong-16-line-height: 24px; --dsw-font-family: var(--dsh-font-family-text-default); --dsw-font-family-brand: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif; /* 覆盖：设计 §3 品牌字仅 logo/欢迎页（本地 woff2 缺失时降级系统字体） */ --dsw-font-l-20: 500 20px/28px var(--dsw-font-family); --dsw-font-l-20-font-family: var(--dsw-font-family); --dsw-font-l-20-font-size: 20px; --dsw-font-l-20-font-style: normal; --dsw-font-l-20-font-weight: 500; --dsw-font-l-20-line-height: 28px; --dsw-font-m-18: 500 16px/28px var(--dsw-font-family); --dsw-font-m-18-font-family: var(--dsw-font-family); --dsw-font-m-18-font-size: 16px; --dsw-font-m-18-font-style: normal; --dsw-font-m-18-font-weight: 500; --dsw-font-m-18-line-height: 28px; --dsw-font-markdown-base: var(--dsh-content-font-size,14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-base-font-family: var(--dsw-font-family); --dsw-font-markdown-base-font-size: var(--dsh-content-font-size,14px); --dsw-font-markdown-base-font-style: normal; --dsw-font-markdown-base-font-weight: 400; --dsw-font-markdown-base-italic: italic var(--dsh-content-font-size,14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-base-italic-font-family: var(--dsw-font-family); --dsw-font-markdown-base-italic-font-size: var(--dsh-content-font-size,14px); --dsw-font-markdown-base-italic-font-style: italic; --dsw-font-markdown-base-italic-font-weight: 400; --dsw-font-markdown-base-italic-line-height: calc(24px + var(--dsh-content-font-delta)); --dsw-font-markdown-base-line-height: calc(24px + var(--dsh-content-font-delta)); --dsw-font-markdown-base-strong: 600 var(--dsh-content-font-size,14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-base-strong-font-family: var(--dsw-font-family); --dsw-font-markdown-base-strong-font-size: var(--dsh-content-font-size,14px); --dsw-font-markdown-base-strong-font-style: normal; --dsw-font-markdown-base-strong-font-weight: 600; --dsw-font-markdown-base-strong-italic: italic 600 var(--dsh-content-font-size,14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-base-strong-italic-font-family: var(--dsw-font-family); --dsw-font-markdown-base-strong-italic-font-size: var(--dsh-content-font-size,14px); --dsw-font-markdown-base-strong-italic-font-style: italic; --dsw-font-markdown-base-strong-italic-font-weight: 600; --dsw-font-markdown-base-strong-italic-line-height: calc(24px + var(--dsh-content-font-delta)); --dsw-font-markdown-base-strong-line-height: calc(24px + var(--dsh-content-font-delta)); --dsw-font-markdown-code: calc(12px + var(--dsh-code-font-delta)) / calc(19px + var(--dsh-code-font-delta)) var(--ds-font-family-code); --dsw-font-markdown-code-block: var(--dsh-code-font-size,11px) / calc(19px + var(--dsh-code-font-delta)) var(--ds-font-family-code); --dsw-font-markdown-code-block-font-family: var(--ds-font-family-code); --dsw-font-markdown-code-block-font-size: var(--dsh-code-font-size,11px); --dsw-font-markdown-code-block-font-style: normal; --dsw-font-markdown-code-block-font-weight: 400; --dsw-font-markdown-code-block-line-height: calc(19px + var(--dsh-code-font-delta)); --dsw-font-markdown-code-block-small: var(--dsh-code-font-size,11px) / calc(16px + var(--dsh-code-font-delta)) var(--ds-font-family-code); --dsw-font-markdown-code-block-small-font-family: var(--ds-font-family-code); --dsw-font-markdown-code-block-small-font-size: var(--dsh-code-font-size,11px); --dsw-font-markdown-code-block-small-font-style: normal; --dsw-font-markdown-code-block-small-font-weight: 400; --dsw-font-markdown-code-block-small-line-height: calc(16px + var(--dsh-code-font-delta)); --dsw-font-markdown-code-font-family: var(--ds-font-family-code); --dsw-font-markdown-code-font-size: calc(12px + var(--dsh-code-font-delta)); --dsw-font-markdown-code-font-style: normal; --dsw-font-markdown-code-font-weight: 400; --dsw-font-markdown-code-line-height: calc(19px + var(--dsh-code-font-delta)); --dsw-font-markdown-h1: 700 calc(21px + var(--dsh-content-font-delta)) / calc(30px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-h1-font-family: var(--dsw-font-family); --dsw-font-markdown-h1-font-size: calc(21px + var(--dsh-content-font-delta)); --dsw-font-markdown-h1-font-style: normal; --dsw-font-markdown-h1-font-weight: 700; --dsw-font-markdown-h1-line-height: calc(30px + var(--dsh-content-font-delta)); --dsw-font-markdown-h2: 700 calc(19px + var(--dsh-content-font-delta)) / calc(28px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-h2-font-family: var(--dsw-font-family); --dsw-font-markdown-h2-font-size: calc(19px + var(--dsh-content-font-delta)); --dsw-font-markdown-h2-font-style: normal; --dsw-font-markdown-h2-font-weight: 700; --dsw-font-markdown-h2-line-height: calc(28px + var(--dsh-content-font-delta)); --dsw-font-markdown-h3: 700 calc(18px + var(--dsh-content-font-delta)) / calc(26px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-h3-font-family: var(--dsw-font-family); --dsw-font-markdown-h3-font-size: calc(18px + var(--dsh-content-font-delta)); --dsw-font-markdown-h3-font-style: normal; --dsw-font-markdown-h3-font-weight: 700; --dsw-font-markdown-h3-line-height: calc(26px + var(--dsh-content-font-delta)); --dsw-font-markdown-h4: 600 var(--dsh-content-font-size,14px) / calc(24px + var(--dsh-content-font-delta)) var(--dsw-font-family); --dsw-font-markdown-h4-font-family: var(--dsw-font-family); --dsw-font-markdown-h4-font-size: var(--dsh-content-font-size,14px); --dsw-font-markdown-h4-font-style: normal; --dsw-font-markdown-h4-font-weight: 600; --dsw-font-markdown-h4-line-height: calc(24px + var(--dsh-content-font-delta)); --dsw-font-markdown-small: 12px/20px var(--dsw-font-family); --dsw-font-markdown-small-font-family: var(--dsw-font-family); --dsw-font-markdown-small-font-size: 12px; --dsw-font-markdown-small-font-style: normal; --dsw-font-markdown-small-font-weight: 400; --dsw-font-markdown-small-italic: italic 12px/20px var(--dsw-font-family); --dsw-font-markdown-small-italic-font-family: var(--dsw-font-family); --dsw-font-markdown-small-italic-font-size: 12px; --dsw-font-markdown-small-italic-font-style: italic; --dsw-font-markdown-small-italic-font-weight: 400; --dsw-font-markdown-small-italic-line-height: 20px; --dsw-font-markdown-small-line-height: 20px; --dsw-font-markdown-small-strong: 600 12px/20px var(--dsw-font-family); --dsw-font-markdown-small-strong-font-family: var(--dsw-font-family); --dsw-font-markdown-small-strong-font-size: 12px; --dsw-font-markdown-small-strong-font-style: normal; --dsw-font-markdown-small-strong-font-weight: 600; --dsw-font-markdown-small-strong-italic: italic 600 12px/20px var(--dsw-font-family); --dsw-font-markdown-small-strong-italic-font-family: var(--dsw-font-family); --dsw-font-markdown-small-strong-italic-font-size: 12px; --dsw-font-markdown-small-strong-italic-font-style: italic; --dsw-font-markdown-small-strong-italic-font-weight: 600; --dsw-font-markdown-small-strong-italic-line-height: 20px; --dsw-font-markdown-small-strong-line-height: 20px; --dsw-font-markdown-table: var(--dsh-content-font-size-secondary,13px)/calc(22px + var(--dsh-content-font-delta-secondary,0px)) var(--dsw-font-family); --dsw-font-markdown-table-font-family: var(--dsw-font-family); --dsw-font-markdown-table-font-size: var(--dsh-content-font-size-secondary,13px); --dsw-font-markdown-table-font-style: normal; --dsw-font-markdown-table-font-weight: 400; --dsw-font-markdown-table-head: 500 var(--dsh-content-font-size-secondary,13px)/calc(22px + var(--dsh-content-font-delta-secondary,0px)) var(--dsw-font-family); --dsw-font-markdown-table-head-font-family: var(--dsw-font-family); --dsw-font-markdown-table-head-font-size: var(--dsh-content-font-size-secondary,13px); --dsw-font-markdown-table-head-font-style: normal; --dsw-font-markdown-table-head-font-weight: 500; --dsw-font-markdown-table-head-line-height: calc(22px + var(--dsh-content-font-delta-secondary,0px)); --dsw-font-markdown-table-line-height: calc(22px + var(--dsh-content-font-delta-secondary,0px)); --dsw-font-s-14: 14px/22px var(--dsw-font-family); --dsw-font-s-14-font-family: var(--dsw-font-family); --dsw-font-s-14-font-size: 14px; --dsw-font-s-14-font-style: normal; --dsw-font-s-14-font-weight: 400; --dsw-font-s-14-line-height: 22px; --dsw-font-s-strong-14: 500 14px/22px var(--dsw-font-family); --dsw-font-s-strong-14-font-family: var(--dsw-font-family); --dsw-font-s-strong-14-font-size: 14px; --dsw-font-s-strong-14-font-style: normal; --dsw-font-s-strong-14-font-weight: 500; --dsw-font-s-strong-14-line-height: 22px; --dsw-font-xl-24: 600 24px/32px var(--dsw-font-family); --dsw-font-xl-24-font-family: var(--dsw-font-family); --dsw-font-xl-24-font-size: 24px; --dsw-font-xl-24-font-style: normal; --dsw-font-xl-24-font-weight: 600; --dsw-font-xl-24-line-height: 32px; --dsw-font-xs-13: 13px/20px var(--dsw-font-family); --dsw-font-xs-13-font-family: var(--dsw-font-family); --dsw-font-xs-13-font-size: 13px; --dsw-font-xs-13-font-style: normal; --dsw-font-xs-13-font-weight: 400; --dsw-font-xs-13-line-height: 20px; --dsw-font-xs-strong-13: 500 13px/20px var(--dsw-font-family); --dsw-font-xs-strong-13-font-family: var(--dsw-font-family); --dsw-font-xs-strong-13-font-size: 13px; --dsw-font-xs-strong-13-font-style: normal; --dsw-font-xs-strong-13-font-weight: 500; --dsw-font-xs-strong-13-line-height: 20px; --dsw-font-xxs-12: 12px/18px var(--dsw-font-family); --dsw-font-xxs-12-font-family: var(--dsw-font-family); --dsw-font-xxs-12-font-size: 12px; --dsw-font-xxs-12-font-style: normal; --dsw-font-xxs-12-font-weight: 400; --dsw-font-xxs-12-line-height: 18px; --dsw-font-xxs-strong-12: 500 12px/18px var(--dsw-font-family); --dsw-font-xxs-strong-12-font-family: var(--dsw-font-family); --dsw-font-xxs-strong-12-font-size: 12px; --dsw-font-xxs-strong-12-font-style: normal; --dsw-font-xxs-strong-12-font-weight: 500; --dsw-font-xxs-strong-12-line-height: 18px; --dsw-font-xxxs-11: 11px/14px var(--dsw-font-family); --dsw-font-xxxs-11-font-family: var(--dsw-font-family); --dsw-font-xxxs-11-font-size: 11px; --dsw-font-xxxs-11-font-style: normal; --dsw-font-xxxs-11-font-weight: 400; --dsw-font-xxxs-11-line-height: 14px; --dsw-font-xxxs-strong-11: 500 11px/14px var(--dsw-font-family); --dsw-font-xxxs-strong-11-font-family: var(--dsw-font-family); --dsw-font-xxxs-strong-11-font-size: 11px; --dsw-font-xxxs-strong-11-font-style: normal; --dsw-font-xxxs-strong-11-font-weight: 500; --dsw-font-xxxs-strong-11-line-height: 14px; --dsw-gradient-onboarding-blue-stops: #3964fe 18.75%, #398efe 51.78%, #6dccff 86.252%, #3964fe; --dsw-gradient-onboarding-cyan-stops: #0293b4 21.154%, #2dc8eb 50.954%, #aff0ff 85.326%, #0293b4; --dsw-gradient-onboarding-violet-stops: #2a2fb6 33.102%, #8b76f6 50.954%, #c5c0ff 85.326%, #2a2fb6; --dsw-linear-gradient-think: linear-gradient(180deg, #fff 20.19%, #fff0 100%); --dsw-linear-think-select: linear-gradient(180deg, #f5f6f7 20.19%, #f5f6f700 100%); --dsw-mask-blur: none; --dsw-menu-backdrop-filter: blur(40px) saturate(150%); --dsw-menu-surface-fill: #f8f9fa94; --dsw-radius-lg: 16px; --dsw-radius-md: 12px; --dsw-radius-panel: 28px; --dsw-radius-sm: 8px; --dsw-radius-xl: 20px; --dsw-radius-xs: 4px; --dsw-shadow-lv1: 0 2px 4px 0 #0000000d; --dsw-shadow-lv1-blur: 0 4px 12px 0 #00000005; --dsw-shadow-lv2: 0 4px 12px 0 #00000005, 0 2px 8px 0 #0000000a; --dsw-shadow-lv3: 0 0 1px 0 #0003, 0 0 4px 0 #00000005, 0 12px 32px 0 #00000014; --dsw-specific-bubble: var(--dsw-static-deepseek-50); --dsw-specific-bubble-highlight: var(--dsw-static-deepseek-200); --dsw-specific-input-major: var(--dsw-static-neutral-bluish-00); --dsw-specific-login-input: var(--dsw-static-neutral-bluish-50); --dsw-specific-menu: var(--dsw-menu-surface-fill); --dsw-specific-selector: var(--dsw-static-neutral-bluish-60); --dsw-specific-sidebar-fill: var(--dsw-static-neutral-bluish-50); --dsw-specific-sidebar-nav-item-active: var(--dsw-static-neutral-bluish-100); --dsw-specific-sidebar-nav-item-active-accent: var(--dsw-static-deepseek-100); --dsw-specific-sidebar-nav-item-hover: var(--dsw-static-neutral-bluish-75); --dsw-specific-tip: var(--dsw-static-neutral-bluish-60); --dsw-static-amber-100: #fef5e7; --dsw-static-amber-400: #f7ad31; --dsw-static-amber-500: #f59e0b; --dsw-static-amber-600: #dd8629; --dsw-static-amber-900: #27241f; --dsw-static-blue-100: #dbeafe; --dsw-static-blue-300: #93c5fd; --dsw-static-blue-400: #60a5fa; --dsw-static-blue-450: #4d93f8; --dsw-static-blue-50: #eff6ff; --dsw-static-blue-500: #3b82f6; --dsw-static-blue-50p: #eaf3ff; --dsw-static-blue-600: #2563eb; --dsw-static-blue-75: #e5f0ff; --dsw-static-blue-800: #1e40af; --dsw-static-blue-900: #0e3074; --dsw-static-blue-950: #172554; --dsw-static-deepseek-100: #e4edfd; --dsw-static-deepseek-200: #d3e2ff; --dsw-static-deepseek-300: #b7c8fe; --dsw-static-deepseek-400: #7aaaff; --dsw-static-deepseek-450: #5686fe; --dsw-static-deepseek-50: #edf3fe; --dsw-static-deepseek-500: #4176e6; --dsw-static-deepseek-600: #4868b2; --dsw-static-deepseek-700-delete: #2f4c8f; --dsw-static-deepseek-800: #34415b; --dsw-static-deepseek-900: #283142; --dsw-static-green-100: #e6faed; --dsw-static-green-400: #4ed17e; --dsw-static-green-500: #22c55e; --dsw-static-green-500-a08: #22c55e14; --dsw-static-green-500-a12: #22c55e1f; --dsw-static-green-900: #233c2c; --dsw-static-neutral-00: #fff; --dsw-static-neutral-100: #f5f5f5; --dsw-static-neutral-1000: #000; --dsw-static-neutral-150: #ededed; --dsw-static-neutral-200: #e5e5e5; --dsw-static-neutral-250: #dcdcdc; --dsw-static-neutral-300: #d4d4d4; --dsw-static-neutral-400: #a2a4a6; --dsw-static-neutral-50: #fafafa; --dsw-static-neutral-500: #7f8287; --dsw-static-neutral-550: #65676b; --dsw-static-neutral-600: #545557; --dsw-static-neutral-700: #3c3c3d; --dsw-static-neutral-800: #292929; --dsw-static-neutral-850: #212123; --dsw-static-neutral-900: #0f0f0f; --dsw-static-neutral-bluish-00: #fff; --dsw-static-neutral-bluish-100: #ebeef2; --dsw-static-neutral-bluish-1000: #0f1115; --dsw-static-neutral-bluish-150: #e9ecf2; --dsw-static-neutral-bluish-200: #e1e5ee; --dsw-static-neutral-bluish-300: #cfd3d6; --dsw-static-neutral-bluish-400: #adb2b8; --dsw-static-neutral-bluish-50: #f9fafb; --dsw-static-neutral-bluish-500: #979da6; --dsw-static-neutral-bluish-60: #f5f6f7; --dsw-static-neutral-bluish-600: #81858c; --dsw-static-neutral-bluish-700: #61666b; --dsw-static-neutral-bluish-75: #f1f3f5; --dsw-static-neutral-bluish-750: #43454a; --dsw-static-neutral-bluish-800: #353638; --dsw-static-neutral-bluish-850: #2c2c2e; --dsw-static-neutral-bluish-875: #232324; --dsw-static-neutral-bluish-900: #1b1b1c; --dsw-static-neutral-bluish-950: #151517; --dsw-static-red-100: #fee2e2; --dsw-static-red-400: #f25a5a; --dsw-static-red-400-a12: #f25a5a1f; --dsw-static-red-50: #fef2f2; --dsw-static-red-500: #ef4444; --dsw-static-red-600: #ec1313; --dsw-static-red-600-a08: #ec131314; --dsw-static-red-900: #570c0c; /* =========================================================================== * 3. V4 语义别名 --v4-*（app.css / chat.css / panels.css / views.css 共用） * ========================================================================= */ /* ---- 3.1 壳层尺寸（设计 §1 / 布局 §3） ---- */ --v4-side-w: 260px; --v4-side-w-collapsed: 48px; --v4-side-w-min: 240px; --v4-side-w-max: 400px; /* 可拖拽上限（默认仍 260；视口不足时按中栏 ≥480 让位） */ --v4-work-w: 380px; --v4-work-w-min: 340px; --v4-work-w-max: 720px; /* 可拖拽上限（默认仍 380；中栏 <480 时自动压缩/收起） */ --v4-work-w-overlay: 560px; /* <1200 时右栏以浮层展开 */ --v4-main-min: 480px; --v4-rail-w: 24px; /* 右栏收起后的右缘竖条 */ --v4-brand-h: 48px; --v4-head-h: 48px; /* 中栏会话头 */ --v4-tabs-h: 44px; /* 右栏标签条 */ --v4-row-h: 32px; /* 左栏行 / 列表行高 */ --v4-newalbum-h: 34px; --v4-archived-h: 40px; --v4-send-h: 28px; --v4-touch-min: 40px; /* 390px 触控目标 */ --v4-msg-max: 720px; /* 消息区最大宽度 */ --v4-page-max: 880px; /* 次级视图内容最大宽度 */ /* ---- 3.2 层级（设计 §1） ---- */ --v4-z-drawer: 30; --v4-z-popover: 40; --v4-z-dialog: 50; --v4-z-toast: 60; /* ---- 3.3 表面 / 描边（设计 §2.1 / §2.2） ---- */ --v4-bg: var(--dsw-alias-bg-base); /* #ffffff 页面底 */ --v4-bg-layer-1: var(--dsw-alias-bg-layer-1); /* #ffffff 卡片 */ --v4-bg-layer-2: var(--dsw-alias-bg-layer-2); --v4-bg-layer-3: var(--dsw-alias-bg-layer-3); --v4-bg-subtle: var(--dsw-static-neutral-bluish-50); /* #f9fafb */ --v4-bg-hover: var(--dsw-static-neutral-bluish-60); /* #f5f6f7 */ --v4-bg-active: var(--dsw-static-neutral-bluish-75); /* #f1f3f5 */ --v4-bg-muted: var(--dsw-static-neutral-bluish-100); /* #ebeef2 封面/骨架底 */ --v4-bg-overlay: var(--dsw-alias-bg-overlay); /* #e9ecf2 浮层 */ --v4-bg-module: var(--dsw-alias-bg-module-platform); /* #e1e5ee 标签条/工具栏 */ --v4-bg-skeleton: var(--dsw-alias-bg-skeleton); /* #0000000a */ --v4-bg-mask: var(--dsw-alias-bg-mask-2); /* 抽屉遮罩 */ --v4-bg-inverse: var(--dsw-static-neutral-bluish-1000); /* #0f1115 深色底 */ --v4-border-l1: var(--dsw-alias-border-l1); /* #0000000a */ --v4-border-l2: var(--dsw-alias-border-l2); /* #0000001a */ --v4-border-l3: var(--dsw-alias-border-l3); /* #0000001f */ --v4-border-l4: var(--dsw-alias-border-l4); /* #00000029 */ /* ---- 3.4 文字（设计 §2.2） ---- */ --v4-text-primary: var(--dsw-alias-label-primary); /* #0f1115 */ --v4-text-primary-dimmed: var(--dsw-alias-label-primary-dimmed); --v4-text-secondary: var(--dsw-alias-label-secondary); /* #61666b */ --v4-text-tertiary: var(--dsw-alias-label-tertiary); /* #81858c */ --v4-text-caption: var(--dsw-alias-label-caption); /* #adb2b8 */ --v4-text-inverse: var(--dsw-alias-label-primary-inverted); /* #ffffff */ --v4-text-dimmed: var(--dsw-alias-label-dimmed); /* ---- 3.5 主操作 / 状态色（设计 §2.2 / §6） ---- */ --v4-accent: var(--dsw-alias-state-business-primary); /* #4176e6 主色/焦点/链接 */ --v4-accent-soft: var(--dsw-static-deepseek-50); /* #edf3fe */ --v4-accent-softer: var(--dsw-static-deepseek-100); /* #e4edfd */ --v4-accent-hover: var(--dsw-static-deepseek-400); --v4-primary-fill: var(--dsw-alias-button-primary-fill); /* #0f1115 主按钮 */ --v4-primary-fill-hover: var(--dsw-alias-button-primary-hover); /* #43454a 提亮 */ --v4-primary-fill-dimmed: var(--dsw-alias-button-primary-dimmed); --v4-success: var(--dsw-alias-state-success-primary); /* #22c55e */ --v4-success-soft: var(--dsw-alias-state-success-tertiary); --v4-warn: var(--dsw-alias-state-warn-primary); /* #f59e0b */ --v4-warn-label: var(--dsw-alias-state-warn-label); --v4-warn-soft: var(--dsw-alias-state-warn-tertiary); --v4-error: var(--dsw-alias-state-error-primary); /* #dc2626 */ --v4-error-soft: var(--dsw-static-red-50); --v4-idle: var(--dsw-alias-state-idle-primary); /* #d4d4d4 */ --v4-idle-dot: var(--dsw-static-neutral-bluish-500); /* #979da6 归档/空闲点 */ /* ---- 3.6 组件语义（菜单 / toast / tooltip / 滚动条） ---- */ --v4-menu-bg: var(--dsw-alias-bg-layer-1); --v4-menu-stroke: var(--dsw-alias-border-l2); --v4-toast-bg: var(--dsw-alias-toast-bg); --v4-toast-text: var(--dsw-alias-toast-label); --v4-tooltip-bg: var(--dsw-alias-tooltip-bg); --v4-tooltip-text: var(--dsw-alias-label-primary-inverted); --v4-scroll-thumb: var(--dsw-alias-bg-module-platform); --v4-scroll-thumb-hover: var(--dsw-static-neutral-bluish-300); --v4-selected-bar: var(--v4-accent); /* 选中行左缘 2px */ --v4-focus-ring: var(--dsw-focus-ring-width) solid var(--dsw-focus-ring-color); --v4-focus-ring-shadow: 0 0 0 var(--dsw-focus-ring-width) var(--dsw-focus-ring-color); --v4-user-bubble-bg: var(--dsw-static-neutral-bluish-75); /* #f1f3f5 老板气泡 */ /* ---- 3.7 圆角（设计 §4，仅此六档 + pill） ---- */ --v4-radius-xs: var(--dsw-radius-xs); /* 4 */ --v4-radius-sm: var(--dsw-radius-sm); /* 8 */ --v4-radius-md: var(--dsw-radius-md); /* 12 */ --v4-radius-lg: var(--dsw-radius-lg); /* 16 */ --v4-radius-xl: var(--dsw-radius-xl); /* 20 */ --v4-radius-panel: var(--dsw-radius-panel); /* 28 */ --v4-radius-pill: 999px; /* ---- 3.8 阴影（设计 §4） ---- */ --v4-shadow-lv1: var(--dsw-shadow-lv1); --v4-shadow-lv2: var(--dsw-shadow-lv2); --v4-shadow-lv3: var(--dsw-shadow-lv3); --v4-elevation-stroke: var(--dsw-elevation-stroke); --v4-elevation-soft: var(--dsw-elevation-soft); /* composer */ --v4-elevation-panel: var(--dsw-elevation-panel); /* 侧栏/面板 */ --v4-elevation-prominent: var(--dsw-elevation-prominent); /* ---- 3.9 字号与字阶（设计 §3） ---- */ --v4-font-family: var(--dsw-font-family); --v4-font-family-code: var(--ds-font-family-code); --v4-fs-20: 20px; --v4-lh-20: 28px; /* 标题 20 */ --v4-fs-16: 16px; --v4-lh-16: 24px; /* 标题 16 */ --v4-fs-14: 14px; --v4-lh-14: 24px; /* 正文 14 */ --v4-fs-13: 13px; --v4-lh-13: 20px; /* 二级 13 */ --v4-fs-12: 12px; --v4-lh-12: 18px; /* 辅助 12 */ --v4-fs-11: 11px; --v4-lh-11: 19px; /* 数字 11 等宽 */ --v4-fw-regular: 400; --v4-fw-medium: 500; --v4-fw-semibold: 600; /* ---- 3.10 动效（设计 §7） ---- */ --v4-dur-collapse: 180ms; --v4-dur-drawer: 200ms; --v4-ease: ease; --v4-ease-drawer: ease-out; }