/* Scoped component integration: brand token layer only; no global reset. Derived from ZTCCloud DS 3.0.0. */ :root { /* ── Brand ── */ --ztc-brand-primary: #008ED3; /* 主蓝 — 标题/强调/左竖条/主操作 */ --ztc-brand-navy: #0067B4; /* 深蓝 — 封面/封底满版背景、权威场景 */ --ztc-brand-cyan: #61CCF0; /* 青蓝 — 科技点缀（AI/数据链路） */ --ztc-brand-amber: #FFC000; /* 金橙 — 关键数据锚点（一页≤1处，面积≤2cm²） */ --ztc-brand-green: #92D050; /* 绿色 — 正向/增长指标 */ --ztc-brand-blue-alt:#0070C0; /* 辅蓝 — 次要强调 */ /* ── Neutral ── */ --ztc-white: #FFFFFF; /* 主底色，占页面 80–90% */ --ztc-bg: #F4F5F6; /* 卡片底/分区底色 */ --ztc-border: #E4E7EC; /* 边框/分割线/卡片描边 */ --ztc-gray: #7F7F7F; /* 通用灰 */ /* ── Text ── */ --ztc-text: #2D3142; /* 正文 — 严禁纯黑 #000000 */ --ztc-text-muted: #58595B; /* 次级说明/页脚文字 */ --ztc-text-on-dark: #FFFFFF; /* 深色底上的文字 */ /* ── Graphic (brand auxiliary lines) ── */ --ztc-graphic-line: #008ED3; /* DNA 线主色 */ --ztc-graphic-line-subtle: #61CCF0; /* 点虚线/同心圆外圈 */ /* ── Semantic aliases (components reference THESE) ── ⚠ --ztc-action 自 v2.0 起为**深蓝** #0067B4（5.8:1）而非主蓝 #008ED3（3.6:1）。 原因：action 语义天然承载文字（按钮标、选中态、链接），而主蓝在任何 小于 WCAG 大字阈值的尺寸上都不达 AA。品牌识别由 --ztc-accent-bar 与 图表 / DNA 线 / 大字标题继续承担，主蓝未退出品牌，只退出「小字」。 */ --ztc-action: var(--ztc-brand-navy); /* #0067B4 · 5.8:1 · 任意字号均达 AA */ --ztc-action-hover: #00558F; /* 7.0:1 · 悬停加深 */ --ztc-action-authority: var(--ztc-brand-navy); --ztc-accent-bar: var(--ztc-brand-primary); /* 4px 标题栏竖条等**纯装饰**识别元 —— 无文字，不适用对比度阈值 */ --ztc-surface-page: var(--ztc-white); --ztc-surface-subtle: var(--ztc-bg); --ztc-border-default: var(--ztc-border); --ztc-text-default: var(--ztc-text); --ztc-accent-data: var(--ztc-brand-amber); --ztc-accent-positive: var(--ztc-brand-green); --ztc-accent-tech: var(--ztc-brand-cyan); /* ── Tag tints (transparent bg + deep text for AA) ── */ --ztc-tint-info-bg: rgba(0,142,211,0.10); --ztc-tint-info-fg: #00669A; /* 5.0:1 — 原为主蓝 #008ED3 仅 3.6:1，是四支 tint 里唯一没用「深版」文字的，属缺陷 */ --ztc-tint-success-bg: rgba(146,208,80,0.15); --ztc-tint-success-fg: #4A7A1E; --ztc-tint-warning-bg: rgba(255,192,0,0.15); --ztc-tint-warning-fg: #8A6200; --ztc-tint-tech-bg: rgba(97,204,240,0.15); --ztc-tint-tech-fg: #006A8E; } :root { /* Families */ --ztc-font-serif: 'Source Serif 4', 'Noto Serif SC', Georgia, serif; /* 标题 · 西文先于中文，拉丁/数字用 Source Serif 4，汉字回退思源宋体 */ --ztc-font-sans: 'Source Sans 3', 'Noto Sans SC', system-ui, sans-serif; /* 正文/UI/数字 · 同上：拉丁/数字用 Source Sans 3，汉字回退思源黑体 */ /* Weights */ --ztc-weight-regular: 400; --ztc-weight-semibold: 600; --ztc-weight-bold: 700; /* Type scale — px values map 1:1 to web; pt noted for PPT/print. 标题(hero/h1/h2) → 宋体 serif；其余 → 黑体 sans。 */ --ztc-size-hero: 53px; /* 40pt · 封面/封底大标题 · serif */ --ztc-size-h1: 48px; /* 36pt · 章节过渡页标题 · serif */ --ztc-size-h2: 32px; /* 24pt · 内容页标题栏 · serif */ --ztc-size-h3: 20px; /* 15pt · 区域/卡片标题 · sans */ --ztc-size-body: 17px; /* 13pt · 正文（可读底线，不小于此） · sans */ --ztc-size-caption: 15px; /* 11pt · 次要说明/注释 · sans */ --ztc-size-footer: 13px; /* 10pt · 页脚（页码/网址/版权） · sans */ --ztc-leading-tight: 1.15; --ztc-leading-body: 1.6; /* ── UI 字阶 UI scale（应用 / 后台 / 网站，密集信息用）── 与上方「演示字阶」**并行而非替代**：演示字阶由 pt 反推，承担 PPT / 印刷 保真，不可为了屏幕密度去改动；界面走这一套。全部 sans（黑体）。 注：charts.css 的 --ztc-table-font 12.5px 是密集数据特例，仍以其为准。 */ --ztc-ui-2xs: 11px; /* 角标 / 徽标数字 — 仅非正文 */ --ztc-ui-xs: 12px; /* 表格单元格、图例、轴标签 */ --ztc-ui-sm: 13px; /* 次要说明、表单帮助文字 — UI 可读底线 */ --ztc-ui-base: 14px; /* 界面正文默认 — 后台 / 表单 / 列表 */ --ztc-ui-md: 16px; /* 强调正文、网站正文 */ --ztc-ui-lg: 18px; /* 卡片标题、区块小标题 */ --ztc-ui-xl: 20px; /* 面板 / 弹层标题 */ --ztc-ui-2xl: 24px; /* 页面标题 */ --ztc-ui-3xl: 30px; /* 网站区块标题 */ --ztc-ui-4xl: 40px; /* 网站 Hero 标题 */ /* 行高 —— 与字阶配对：越密越紧 */ --ztc-leading-none: 1; /* 单行数字 / 徽标 */ --ztc-leading-dense: 1.3; /* 表格、密集列表 */ --ztc-leading-ui: 1.45; /* 界面正文默认 */ --ztc-leading-loose: 1.75; /* 长文阅读 / 文档页 */ } :root { --ztc-space-1: 4px; /* 最小间隙，内部微调 */ --ztc-space-2: 8px; /* 图标与文字间距、行内间隙 */ --ztc-space-3: 12px; /* 卡片内部紧凑间距 */ --ztc-space-4: 16px; /* 列表项间距、标准内边距 */ --ztc-space-5: 20px; /* 区块元素间距 */ --ztc-space-6: 24px; /* 标题与内容呼吸空间（titleGap） */ --ztc-space-7: 32px; /* 大区块间距、section 内边距 */ --ztc-space-8: 38px; /* 最小页边距 margin.min（0.4 in） */ --ztc-space-9: 48px; /* 章节间距、封面内边距 */ --ztc-space-10: 64px; /* 封面大间距、全屏留白 */ /* Radius — 咨询风小圆角 */ --ztc-radius-sm: 4px; --ztc-radius-md: 6px; --ztc-radius-card: 8px; /* 卡片圆角上限 ≤ 8px */ /* Layout */ --ztc-margin-min: 38px; /* 0.4 in */ --ztc-grid-cols: 12; /* @kind other */ } :root { /* ── 响应式断点 Breakpoints ── 只作 token 记录与 JS 读取；CSS @media 无法用 var()，媒体查询请写字面值， 数值以此处为唯一真相。 */ --ztc-bp-mobile: 375px; /* 手机 — 单列 */ --ztc-bp-tablet: 768px; /* 平板 — 双列 */ --ztc-bp-laptop: 1280px; /* 笔记本 — 主力桌面断点 */ --ztc-bp-wide: 1920px; /* 宽屏 / 看板大屏 */ /* ── 容器与文本宽度 Container & measure ── */ --ztc-container-sm: 768px; /* 文档/文章正文栏 */ --ztc-container-md: 1080px; /* 标准内容页 */ --ztc-container-lg: 1280px; /* 网站主容器 */ --ztc-container-xl: 1600px; /* 后台工作台 */ --ztc-container-full: 100%; /* 看板 / 大屏满宽 */ --ztc-measure: 68ch; /* 长文单行字数上限（可读性）*/ --ztc-gutter: 24px; /* 栅格列间距（桌面）*/ --ztc-gutter-mobile: 16px; /* ── 层级 Z-index ── 离散阶梯，禁止在业务代码里手写数字。 */ --ztc-z-base: 0; /* @kind other */ /* 常规文档流 */ --ztc-z-raised: 10; /* @kind other */ /* 卡片 hover 抬升、吸附列 */ --ztc-z-sticky: 100; /* @kind other */ /* 吸顶表头、吸底操作条 */ --ztc-z-nav: 200; /* @kind other */ /* 顶栏 / 侧边栏 */ --ztc-z-dropdown: 300; /* @kind other */ /* 下拉、菜单、Select 面板 */ --ztc-z-scrim: 400; /* @kind other */ /* 弹层遮罩 */ --ztc-z-modal: 500; /* @kind other */ /* 模态、抽屉 */ --ztc-z-popover: 600; /* @kind other */ /* 弹层之上的浮层 */ --ztc-z-toast: 700; /* @kind other */ /* 轻提示 — 永远最上 */ --ztc-z-tooltip: 800; /* @kind other */ /* Tooltip — 跟随指针，压过一切 */ /* ── 控件高度 Control heights ── 44px 是可访问性命中区底线（readme 红线）；36px 仅限筛选条等 密集工具区，且必须有 ≥8px 的外部可点空隙补足。 */ --ztc-control-h-sm: 32px; /* 标签内按钮、表格行内操作 */ --ztc-control-h-md: 36px; /* 筛选条 / 工具栏（密集区） */ --ztc-control-h-lg: 44px; /* 表单、主操作按钮 —— 默认 */ --ztc-control-h-xl: 52px; /* 网站 Hero 主 CTA */ /* ── 边框宽度 Border widths ── */ --ztc-border-w: 1px; /* 默认 — 卡片/输入框/表格 */ --ztc-border-w-thick: 2px; /* 选中态、focus 环、强调边 */ --ztc-border-w-bar: 4px; /* 标题栏左竖条 —— 品牌识别核心，不可改 */ /* ── 图标尺寸与描边 Icon ── */ --ztc-icon-xs: 16px; --ztc-icon-sm: 20px; /* 标准 */ --ztc-icon-md: 24px; --ztc-icon-lg: 32px; --ztc-icon-stroke: 1.5px; /* Lucide 默认 2px 偏重，本系统统一 1.5px */ } :root { /* Elevation */ --ztc-elevation-0: none; /* 平面 — 默认卡片/表格/输入框（配边框） */ --ztc-elevation-1: 0 2px 8px rgba(45,49,66,0.08); /* 悬浮 — 下拉/悬浮卡/Tooltip */ --ztc-elevation-2: 0 12px 32px rgba(45,49,66,0.18); /* 弹层 — 模态/Dialog/抽屉 */ /* Overlay scrim */ --ztc-scrim: rgba(45,49,66,0.45); /* Motion — duration */ --ztc-duration-fast: 150ms; /* @kind other */ /* 悬停/按下/小元素状态切换 */ --ztc-duration-base: 250ms; /* @kind other */ /* 下拉展开/Tooltip/标准过渡 */ --ztc-duration-slow: 300ms; /* @kind other */ /* 弹层进出/抽屉滑动（上限） */ /* Motion — easing */ --ztc-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* @kind other */ /* 通用过渡（默认） */ --ztc-ease-out: cubic-bezier(0, 0, 0.2, 1); /* @kind other */ /* 进入/展开 — 快入慢出 */ --ztc-ease-in: cubic-bezier(0.4, 0, 1, 1); /* @kind other */ /* 退出/收起 — 慢入快出 */ } :root { --ztc-sans: var(--ztc-font-sans); --ztc-serif: var(--ztc-font-serif); --ztc-fs-body: 16px; --ztc-fs-small: 14px; --ztc-fs-caption: 13px; --ztc-radius: var(--ztc-radius-card); --ztc-shadow-hover: var(--ztc-elevation-1); --ztc-shadow-panel: var(--ztc-elevation-2); } :root { --ztc-surface-inverse-deep: #15283a; } /* inherited company-website surface token */