/* 用户端全局设计令牌，统一颜色、间距、圆角和阴影语义。 */
:root {
  /* 核心语义层用于统一页面画布、内容表面、文字、边界和品牌强调。 */
  --web-canvas: #f4f5f7;
  --web-surface-base: #ffffff;
  --web-surface-raised: #f8f8f7;
  --web-surface-hover: #f1f0ed;
  --web-text-primary: #1d2024;
  --web-text-muted: #676d75;
  --web-border: #dfe2e6;
  --web-border-strong: #c9cdd3;
  --web-brand: #b57b3d;
  --web-brand-hover: #99622d;
  --web-brand-soft: #f2e6d7;
  --web-accent: var(--web-brand);

  /* 既有变量映射到核心语义层，供尚未迁移的页面继续使用。 */
  --web-bg: var(--web-canvas);
  --web-sidebar: var(--web-surface-raised);
  --web-surface: var(--web-surface-base);
  --web-raised: var(--web-surface-raised);
  --web-hover: var(--web-surface-hover);
  --web-primary: var(--web-brand);
  --web-primary-hover: var(--web-brand-hover);
  --web-primary-light: #c99a67;
  --web-input-focus: var(--web-brand);
  --web-creative-accent: var(--web-brand);
  --web-creative-accent-hover: var(--web-brand-hover);
  --web-creative-button-text: #17191c;
  --web-creative-danger: #e49b92;
  --web-text: var(--web-text-primary);
  --web-muted: var(--web-text-muted);
  --web-line: var(--web-border);
  --web-surface-soft: var(--web-surface-raised);
  --web-text-strong: #111317;
  --web-text-secondary: #484e56;
  --web-text-tertiary: #6f757d;
  --web-text-subtle: #797f87;
  --web-text-faint: #858b92;
  --web-text-meta: #7d838b;
  --web-text-detail: #5b6169;
  --web-text-caption: #727880;
  --web-text-placeholder: #858b93;
  --web-text-quiet: #6f757d;
  --web-text-hint: #747a82;
  --web-text-note: #767c84;
  --web-text-disabled: #92979e;
  --web-text-input-placeholder: #858b93;
  --web-input-placeholder: #858b93;
  --web-text-context: #5f656d;
  --web-text-panel-muted: #656b73;
  --web-media-control-text: #f3f4f2;
  --web-text-neutral: #565c64;
  --web-text-subdued: #4f555d;
  --web-prompt-placeholder: #686e76;
  --web-text-critical-muted: #6a5552;
  --web-text-media-muted: #807466;
  --web-project-count: var(--web-text-muted);
  --web-project-placeholder: #7d6a55;
  --web-project-badge-text: #574737;
  --web-project-tooltip-accent: #855722;
  --web-project-tooltip-label: var(--web-text-muted);
  --web-project-copy-muted: #747a82;
  --web-project-divider-text: #5b6169;
  --web-project-meta: var(--web-text-muted);
  --web-project-state-text: #747a82;
  --web-dialog-description: #666c74;
  --web-creative-muted: var(--web-text-muted);
  --web-script-hint: #666c74;
  --web-panel-control-text: #777d85;
  --web-panel-hint: #626870;
  --web-select-option: #50565e;
  --web-select-group: #686e76;
  --web-task-idle-text: #c5beb5;
  --web-task-idle-dot: #817d76;
  --web-task-success-text: #8cc297;
  --web-task-success-dot: #75ad82;
  --web-task-failed-text: #dc9389;
  --web-task-failed-dot: #d98377;
  --web-task-cancelled: #a89e91;
  --web-task-detail: #555;
  --web-dialog-option-muted: #88857f;
  --web-project-shared-note: #746b60;
  --web-episode-placeholder: #9a866e;
  --web-episode-status-text: #5f503e;
  --web-episode-copy: #8f514a;
  --web-episode-copy-hover: #f0e2d7;
  --web-icon-button-muted: #747a82;
  --web-message-text: #eee9e2;
  --web-message-muted: #b7b1a8;
  --web-empty-text: var(--web-text-muted);
  --web-accent-dark: #9f4038;
  --web-accent-muted: #846039;
  --web-accent-soft: #8a7659;
  --web-line-strong: var(--web-border);
  --web-line-emphasis: var(--web-border-strong);
  --web-line-active: #796348;
  --web-line-hover: #7c6546;
  --web-line-action-hover: #b68d57;
  --web-line-danger-hover: #b85e55;
  --web-line-critical: #85534d;
  --web-line-accent: #8a704e;
  --web-project-card-hover-line: #a58358;
  --web-project-tooltip-line: var(--web-border);
  --web-project-tooltip-line-soft: #eceef1;
  --web-invalid-line: #b45d54;
  --web-invalid-line-hover: #d9786b;
  --web-timeline-action-line: #765d40;
  --web-timeline-focus-line: #9a7a50;
  --web-upload-hover-line: #8b6d47;
  --web-search-line: #a47a4d;
  --web-message-line: #4b4033;
  --web-control-muted: #817b72;
  --web-icon-muted: #8e7554;
  --web-divider-soft: #e8eaed;
  --web-scrollbar-thumb: #756047;
  --web-scrollbar-track: #0b0c0a;
  --web-scrollbar-track-panel: #151613;
  --web-scrollbar-track-editor: #171815;
  --web-scrollbar-compact: #5b554c;
  --web-scrollbar-thumb-hover: #eee5d8;
  --web-scrollbar-global-thumb: #aeb3ba;
  --web-scrollbar-global-track: #eceef1;
  --web-scrollbar-global-hover: #858b93;
  --web-success: #3f8555;
  --web-success-bright: #54c77a;
  --web-success-border: #b5edc8;
  --web-complete: #39794c;
  --web-info: #426f9d;
  --web-warning: #a96812;
  --web-danger: #b84d43;
  --web-danger-soft: #f6e3df;
  --web-mention-default-line: #b4864d;
  --web-mention-remove-line: #c36a62;
  --web-mention-remove-hover: #a9433b;
  --web-mention-remove-hover-line: #f0a098;
  --web-mention-voice-line: #c8ab83;
  --web-mention-scene-bg: #e5f0e5;
  --web-mention-scene-line: #5c9a7a;
  --web-mention-prop-bg: #eee5d8;
  --web-mention-prop-line: #7180bd;
  --web-mention-custom-line: #ad7770;
  --web-mention-storyboard-line: #b99767;
  --web-switch-track: #b5bac1;
  --web-switch-track-active: #9f4038;
  --web-switch-border: #806443;
  --web-switch-thumb: #ffffff;
  --web-control-outline: rgba(29, 32, 36, 0.18);
  --web-loading-mask: rgba(7, 8, 7, 0.82);
  --web-history-overlay: rgba(7, 8, 7, 0.68);
  --web-media-overlay: rgba(9, 10, 8, 0.82);
  --web-preview-overlay: rgba(0, 0, 0, 0.48);
  --web-error-overlay: rgba(33, 23, 21, 0.9);
  --web-current-outline: rgba(9, 10, 8, 0.72);
  --web-media-overlay-soft: rgba(7, 8, 7, 0.72);
  --web-media-overlay-medium: rgba(7, 8, 7, 0.76);
  --web-media-overlay-dense: rgba(7, 8, 7, 0.78);
  --web-page-mask: rgba(244, 245, 247, 0.9);
  --web-page-mask-light: rgba(244, 245, 247, 0.72);
  --web-dialog-mask: rgba(8, 9, 8, 0.82);
  --web-dialog-mask-light: rgba(8, 9, 8, 0.48);
  --web-video-bg: #000;
  --web-video-controls: rgba(0, 0, 0, 0.78);
  --web-video-dialog-controls: rgba(0, 0, 0, 0.84);
  --web-card-menu-bg: rgba(255, 255, 255, 0.96);
  --web-media-state-mask: rgba(7, 8, 7, 0.9);
  --web-search-outline: rgba(138, 112, 78, 0.18);
  --web-media-loading-text: #c8a66e;
  --web-media-error-text: #d9786f;
  --web-chart-primary: #e2aa61;
  --web-chart-tooltip-bg: #171717;
  --web-chart-tooltip-line: #3a3024;
  --web-chart-tooltip-text: #eee;
  --web-chart-axis-line: var(--web-border);
  --web-chart-axis-text: var(--web-text-muted);
  --web-chart-split-line: var(--web-divider-soft);
  --web-tooltip-bg: rgba(17, 16, 13, 0.9);
  --web-focus-inset: rgba(198, 160, 106, 0.22);
  --web-focus-ring: rgba(198, 160, 106, 0.2);
  --web-focus-ring-soft: rgba(198, 160, 106, 0.12);
  --web-focus-ring-search: rgba(198, 160, 106, 0.14);
  --web-focus-ring-active: rgba(198, 160, 106, 0.28);
  --web-focus-ring-strong: rgba(198, 160, 106, 0.35);
  --web-invalid-outline: rgba(180, 93, 84, 0.2);
  --web-card-focus-ring: rgba(165, 131, 88, 0.28);
  --web-timeline-focus-ring: rgba(154, 122, 80, 0.28);
  --web-dialog-focus-ring: rgba(154, 122, 80, 0.12);
  --web-task-running-ring: rgba(198, 160, 106, 0.12);
  --web-shadow-lg: 0 20px 54px rgba(24, 28, 33, 0.1);
  --web-shadow-toast: 0 16px 50px rgba(24, 28, 33, 0.14);
  --web-shadow-dialog: 0 20px 60px rgba(24, 28, 33, 0.16);
  --web-shadow-mention: 0 18px 44px rgba(24, 28, 33, 0.14);
  --web-shadow-preview: 0 10px 24px rgba(24, 28, 33, 0.14);
  --web-shadow-project-badge: 0 3px 10px rgba(24, 28, 33, 0.08);
  --web-shadow-project-tooltip: 0 14px 36px rgba(24, 28, 33, 0.12);
  --web-shadow-duration: 0 16px 38px rgba(24, 28, 33, 0.14);
  --web-shadow-creative-shell: 0 26px 70px rgba(24, 28, 33, 0.14);
  --web-shadow-select: 0 18px 46px rgba(24, 28, 33, 0.14);
  --web-shadow-card-action: 0 4px 12px rgba(24, 28, 33, 0.08);
  --web-shadow-card-action-hover: 0 5px 14px rgba(24, 28, 33, 0.12);
  --web-shadow-card-menu: 0 12px 30px rgba(24, 28, 33, 0.14);

  /* 字体、控件、容器、圆角和间距令牌为后续页面迁移提供统一尺寸。 */
  --font-ui: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --font-display: "Songti SC", "SimSun", serif;
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-md: 13px;
  --font-size-lg: 14px;
  --font-size-xl: 16px;
  --font-size-metric: 20px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --control-height-sm: 32px;
  --control-height-md: 36px;
  --control-height-lg: 40px;
  --sidebar-width: 216px;
  --sidebar-width-collapsed: 68px;
  --mobile-bar-height: 58px;
  --page-content-max: 1440px;
  --page-content-compact: 1320px;
  --page-gutter: 32px;
  --page-gutter-mobile: 18px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
}
