/* ============================================================ Bibliotheca Design Tokens — v1.1 知识库系统全局样式变量，单一真实来源 (Single Source of Truth) 使用方式： 1. 在 index.html 中 2. 在 Vue 组件中直接使用 var(--color-primary-500) 3. Tailwind 配置引用此文件中的色值，保持一致 主题：暖石 Obsidian Warm × 深邃琥珀金 Deep Amber ============================================================ */ :root { /* ========================================================== 一、品牌主色 — 深邃琥珀金 ========================================================== */ --color-primary-50: #FFFBF0; --color-primary-100: #FFF3D6; --color-primary-200: #FDE5A8; --color-primary-300: #F9C94E; --color-primary-400: #E8A30E; --color-primary-500: #C2710B; /* ★ 主色 */ --color-primary-600: #9D5808; /* hover */ --color-primary-700: #7C4406; /* active / 深色文字 */ --color-primary-800: #5C3204; --color-primary-900: #3D1F03; /* ========================================================== 一·补、流程 / 媒体语义色（A5，2026-09-18） ---------------------------------------------------------- 原先这几个颜色以**裸 hex** 散落在 6+ 个页面（Guide/Dashboard/ SourceDetail/MediaLibrary），改一处要全局搜。现收口为令牌， 取值与原字面量**完全一致**（仅改引用方式，视觉零变化）。 ========================================================== */ --color-stage-ai: #7C5CFC; /* 流程阶段：AI 加工 */ --color-stage-qa: #D4A017; /* 流程阶段：质检 */ --color-stage-reject: #EF4444; /* 流程阶段：驳回 */ --color-media-thumb-from: #1F2937; /* 媒体缩略图占位渐变（起） */ --color-media-thumb-to: #374151; /* 媒体缩略图占位渐变（止） */ /* 数据集"质量等级"徽章：三级需要**彼此可区分**，而品牌色板里没有蓝色对应项， 故 ql-2 的蓝保留为专用令牌（其余两级统一到品牌语义色：ql-0 用 stone、ql-1 用 warning）。 */ --color-quality-2-bg: #DBEAFE; --color-quality-2-text: #2563EB; /* ========================================================== 二、中性色 — 暖石色系 ========================================================== */ --color-stone-25: #FDFDFA; /* 页面底色 */ --color-stone-50: #FAF9F5; /* 区块 / 卡片底色 */ --color-stone-100: #F5F1EB; /* hover 底色 */ --color-stone-150: #EFEAE2; /* 选中底色 */ --color-stone-200: #E8E3D9; /* 边框 */ --color-stone-300: #D6D0C5; /* 分割线 */ --color-stone-400: #A9A193; /* 禁用文字 */ --color-stone-500: #7D766C; /* 辅助文字 */ --color-stone-600: #5F5850; /* 次要文字 */ --color-stone-700: #474138; /* 正文 */ --color-stone-800: #2D2922; /* 标题 */ --color-stone-900: #1B1814; /* 强调文字 */ /* ========================================================== 三、语义色 ========================================================== */ /* 成功 — 温暖森林绿 */ --color-success-50: #F2F9F0; --color-success-100: #DBEFD6; --color-success-200: #B4DFA8; --color-success-500: #3F9142; --color-success-600: #2F7233; --color-success-700: #215625; /* 警告 — 柔和琥珀 */ --color-warning-50: #FFF8EB; --color-warning-100: #FEEBC8; --color-warning-200: #FDD68A; --color-warning-500: #D28B0A; --color-warning-600: #A86F08; --color-warning-700: #7C5206; /* 危险 — 暖朱红 */ --color-danger-50: #FEF4F2; --color-danger-100: #FDE1DB; --color-danger-200: #FABFB5; --color-danger-500: #CB4A3A; --color-danger-600: #A33A2D; --color-danger-700: #7C2C22; /* 信息 — 中性灰蓝（极少用） */ --color-info-50: #F4F6F8; --color-info-100: #E3E8ED; --color-info-500: #687787; /* ========================================================== 四、质量分级色（Medallion Architecture） ========================================================== */ /* Gold — 高品质 / 可直接使用 */ --color-gold-bg: var(--color-primary-100); --color-gold-text: var(--color-primary-700); --color-gold-border: var(--color-primary-200); /* Silver — 需复核 */ --color-silver-bg: var(--color-stone-100); --color-silver-text: var(--color-stone-600); --color-silver-border: var(--color-stone-200); /* Bronze — 归档 / 低质 */ --color-bronze-bg: #F9F4EF; --color-bronze-text: #A07C5C; --color-bronze-border: #E8D9CB; /* ========================================================== 五、字体系统 ========================================================== */ --font-sans: 'Inter', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace; /* 字号 */ --text-h1: 1.5rem; /* 24px */ --text-h2: 1.25rem; /* 20px */ --text-h3: 1rem; /* 16px */ --text-body-lg: 0.9375rem; /* 15px */ --text-body: 0.875rem; /* 14px */ --text-body-sm: 0.8125rem; /* 13px */ --text-caption: 0.75rem; /* 12px */ --text-code: 0.8125rem; /* 13px */ /* 字重 */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* 行高 */ --leading-heading: 1.3; --leading-body: 1.6; --leading-compact: 1.5; /* ========================================================== 六、间距系统（4px 基准） ========================================================== */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* ========================================================== 七、圆角系统 ========================================================== */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px — Tag, Badge */ --radius-md: 0.375rem; /* 6px — Button, Input */ --radius-lg: 0.5rem; /* 8px — Card, Dropdown */ --radius-xl: 0.75rem; /* 12px — Modal, Panel */ --radius-full: 9999px; /* Pill 形状 */ /* ========================================================== 八、阴影 ========================================================== */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.06), 0 4px 6px rgba(0, 0, 0, 0.04); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.07), 0 10px 10px rgba(0, 0, 0, 0.03); /* ========================================================== 九、组件级变量（便捷别名） ========================================================== */ /* 页面布局 */ --page-bg: var(--color-stone-25); --page-max-width: 1280px; --page-padding-x: var(--space-6); --page-padding-y: var(--space-6); /* Sidebar */ --sidebar-width: 220px; --sidebar-width-collapsed: 64px; --sidebar-bg: #FFF; --sidebar-border: var(--color-stone-200); --sidebar-item-height: 40px; --sidebar-item-radius: var(--radius-md); --sidebar-item-gap: var(--space-1); /* Header */ --header-height: 56px; --header-bg: #FFF; --header-border: var(--color-stone-200); /* Button */ --btn-height-sm: 32px; --btn-height-md: 38px; --btn-height-lg: 44px; --btn-padding-x-sm: 0.75rem; --btn-padding-x-md: 1rem; --btn-padding-x-lg: 1.25rem; --btn-radius: var(--radius-md); --btn-font-size: var(--text-body); --btn-gap: var(--space-2); /* Input */ --input-height: 38px; --input-height-lg: 44px; --input-padding-x: 0.75rem; --input-radius: var(--radius-md); --input-font-size: var(--text-body); --input-border: var(--color-stone-200); --input-border-hover: var(--color-stone-300); --input-border-focus: var(--color-primary-500); --input-ring-focus: 0 0 0 3px var(--color-primary-100); --input-bg-disabled: var(--color-stone-50); /* Card */ --card-bg: #FFF; --card-border: var(--color-stone-200); --card-border-hover: var(--color-stone-300); --card-radius: var(--radius-lg); --card-padding: var(--space-4); --card-gap: var(--space-4); /* Table */ --table-header-bg: var(--color-stone-50); --table-border: var(--color-stone-200); --table-row-hover: var(--color-stone-25); --table-row-selected: var(--color-primary-50); --table-cell-padding-x: var(--space-4); --table-cell-padding-y: var(--space-3); /* Modal */ --modal-width-sm: 480px; --modal-width-md: 560px; --modal-width-lg: 720px; --modal-radius: var(--radius-xl); --modal-shadow: var(--shadow-xl); --modal-overlay: rgba(0, 0, 0, 0.45); --modal-padding: var(--space-6); /* Toast */ --toast-width: 360px; --toast-offset-top: var(--space-4); --toast-offset-right: var(--space-4); --toast-radius: var(--radius-lg); --toast-shadow: var(--shadow-lg); --toast-padding: var(--space-3) var(--space-4); --toast-duration-fast: 3000ms; --toast-duration-slow: 5000ms; /* Tag / Badge */ --tag-height: 24px; --tag-padding-x: 0.5rem; --tag-font-size: var(--text-caption); --tag-radius: var(--radius-sm); --tag-font-weight: var(--font-medium); /* 步骤条 */ --step-dot-size: 24px; --step-line-width: 2px; --step-gap: 100px; --step-label-size: var(--text-caption); /* 过渡动效 */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease-out; /* Z-index 层级 */ --z-dropdown: 100; --z-sticky: 200; --z-modal-backdrop: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600; } /* ========================================================== 十、全局基础样式 ========================================================== */ *, *::before, *::after { box-sizing: border-box; } html { font-family: var(--font-sans); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { margin: 0; background: var(--page-bg); color: var(--color-stone-700); font-size: var(--text-body); line-height: var(--leading-body); } /* 标题基础 */ h1 { font-size: var(--text-h1); font-weight: var(--font-semibold); line-height: var(--leading-heading); color: var(--color-stone-800); } h2 { font-size: var(--text-h2); font-weight: var(--font-semibold); line-height: var(--leading-heading); color: var(--color-stone-800); } h3 { font-size: var(--text-h3); font-weight: var(--font-semibold); line-height: var(--leading-body); color: var(--color-stone-800); } /* 链接 */ a { color: var(--color-primary-600); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-primary-500); text-decoration: underline; } /* 选中 */ ::selection { background: var(--color-primary-100); color: var(--color-primary-800); } /* 滚动条（Webkit） */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-stone-200); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-stone-300); } /* Focus 可见（键盘导航） */ :focus-visible { outline: 2px solid var(--color-primary-500); outline-offset: 2px; border-radius: var(--radius-sm); }