/* ============================================================ Bibliotheca Design Tokens — v1.1 知识库系统全局样式变量，单一真实来源 (Single Source of Truth) 使用方式： 1. 在 index.html 中 2. 在 Vue 组件中直接使用 var(--color-primary-500) 3. Tailwind 配置引用此文件中的色值，保持一致 主题：暖陶土 Warm Terracotta（以 geo 配色方案为准） ============================================================ */ :root { /* ========================================================== 一、品牌主色 — 暖陶土（geo：--geo-primary #C2410C） ========================================================== */ --color-primary-50: #FFF7ED; --color-primary-100: #FFEDD5; --color-primary-200: #FED7AA; --color-primary-300: #FDBA74; --color-primary-400: #FB923C; --color-primary-500: #C2410C; /* ★ 主色（geo primary） */ --color-primary-600: #9A3412; /* hover（geo primary-hover） */ --color-primary-700: #7C2D12; /* active / 深色文字（geo primary-active） */ --color-primary-800: #5C1E0A; --color-primary-900: #431407; /* ========================================================== 二、中性色 — 暖陶土石系（geo：--geo-text-* / --geo-bg-*） ========================================================== */ --color-stone-25: #FAFAF9; /* 页面底色（geo bg-page） */ --color-stone-50: #F5F5F4; /* 区块 / 卡片底色（geo sidebar-bg） */ --color-stone-100: #EEEDEB; /* hover 底色（geo sidebar-hover） */ --color-stone-150: #E7E5E4; /* 选中底色（geo border） */ --color-stone-200: #E7E5E4; /* 边框（geo border） */ --color-stone-300: #D6D3D1; /* 分割线 */ --color-stone-400: #A8A29E; /* 禁用文字（geo text-disabled） */ --color-stone-500: #78716C; /* 辅助文字（geo text-secondary） */ --color-stone-600: #57534E; /* 次要文字 */ --color-stone-700: #44403C; /* 正文 */ --color-stone-800: #292524; /* 标题 */ --color-stone-900: #1C1917; /* 强调文字（geo text-primary） */ /* ========================================================== 三、语义色 ========================================================== */ /* 成功 — 暖绿（geo --geo-success） */ --color-success-50: #DCFCE7; --color-success-100: #BBF7D0; --color-success-200: #86EFAC; --color-success-500: #16A34A; --color-success-600: #15803D; --color-success-700: #166534; /* 警告 — 暖琥珀（geo --geo-warning） */ --color-warning-50: #FFFBEB; --color-warning-100: #FEF3C7; --color-warning-200: #FDE68A; --color-warning-500: #D97706; --color-warning-600: #B45309; --color-warning-700: #92400E; /* 危险 — 暖红（geo --geo-error） */ --color-danger-50: #FEF2F2; --color-danger-100: #FEE2E2; --color-danger-200: #FECACA; --color-danger-500: #DC2626; --color-danger-600: #B91C1C; --color-danger-700: #991B1B; /* 信息 — 天蓝（geo --geo-info） */ --color-info-50: #F0F9FF; --color-info-100: #E0F2FE; --color-info-500: #0EA5E9; /* ========================================================== 四、质量分级色（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); }