:root { /* * RentOps UI v1 formal tokens. * These values are extracted from the approved Workbench and Operating * Analysis north stars. New page baselines consume this semantic layer. */ /* 全局唯一字体栈（2026-08-07 Typography 规范定稿，Windows 优先）： Windows（用户主力）：数字/西文落 Segoe UI，中文落微软雅黑； Mac（验收机）：Chromium 跳过 -apple-system，落苹方（数字与汉字同族）。 不引入展示字体/webfont；数字不设专用字体（DESIGN.md Typography） */ --rentops-font-sans: -apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif; /* ===== Typography 字阶（17 组，DESIGN.md「Typography」为唯一权威定义） ===== 新页面/新家族只允许消费这一组；数值即 v2 家族已验收真值 */ --rentops-type-object-size: 22px; --rentops-type-object-weight: 650; --rentops-type-object-line-height: 30px; --rentops-type-object-letter-spacing: -0.01em; --rentops-type-metric-lg-size: 30px; --rentops-type-metric-lg-weight: 650; --rentops-type-metric-lg-line-height: 1.15; --rentops-type-metric-lg-letter-spacing: -0.02em; --rentops-type-metric-size: 21px; --rentops-type-metric-weight: 650; --rentops-type-metric-line-height: 1.36; --rentops-type-metric-letter-spacing: -0.015em; --rentops-type-page-size: 20px; --rentops-type-page-weight: 650; --rentops-type-page-line-height: 28px; --rentops-type-page-letter-spacing: -0.01em; --rentops-type-topbar-size: 18px; --rentops-type-topbar-weight: 600; --rentops-type-topbar-line-height: 26px; --rentops-type-topbar-letter-spacing: -0.01em; --rentops-type-section-size: 16px; --rentops-type-section-weight: 600; --rentops-type-section-line-height: 24px; --rentops-type-section-letter-spacing: -0.01em; --rentops-type-card-size: 14px; --rentops-type-card-weight: 600; --rentops-type-card-line-height: 22px; --rentops-type-value-size: 14px; --rentops-type-value-weight: 500; --rentops-type-value-line-height: 1.4; --rentops-type-button-size: 14px; --rentops-type-button-weight: 500; --rentops-type-button-line-height: 20px; --rentops-type-nav-size: 14px; --rentops-type-nav-weight: 400; --rentops-type-nav-line-height: 22px; --rentops-type-body-size: 14px; --rentops-type-body-weight: 400; --rentops-type-body-line-height: 22px; --rentops-type-comparison-size: 14px; --rentops-type-comparison-weight: 600; --rentops-type-comparison-line-height: 20px; --rentops-type-label-size: 12px; --rentops-type-label-weight: 500; --rentops-type-label-line-height: 18px; --rentops-type-note-size: 12px; --rentops-type-note-weight: 400; --rentops-type-note-line-height: 17px; --rentops-type-note-s-size: 12px; --rentops-type-note-s-weight: 400; --rentops-type-note-s-line-height: 17px; --rentops-type-tag-size: 12px; --rentops-type-tag-weight: 500; --rentops-type-tag-line-height: 16px; /* * 遗留文字 token（--rentops-ui-text-*）：数值与字阶不一致，但仍有旧页面消费， * 保留现状不动；新代码一律用 --rentops-type-*。随各页面规范化逐页收编后删除。 */ --rentops-ui-text-page-title-size: 22px; --rentops-ui-text-page-title-weight: 600; --rentops-ui-text-page-title-line-height: 30px; --rentops-ui-text-detail-title-size: 24px; --rentops-ui-text-detail-title-weight: 600; --rentops-ui-text-detail-title-line-height: 32px; --rentops-ui-text-detail-title-letter-spacing: -0.01em; --rentops-ui-text-section-title-size: 18px; --rentops-ui-text-section-title-weight: 600; --rentops-ui-text-section-title-line-height: 26px; --rentops-ui-text-component-title-size: 16px; --rentops-ui-text-component-title-weight: 600; --rentops-ui-text-component-title-line-height: 24px; --rentops-ui-text-body-size: 14px; --rentops-ui-text-body-weight: 400; --rentops-ui-text-body-line-height: 22px; --rentops-ui-text-supporting-size: 14px; --rentops-ui-text-supporting-weight: 400; --rentops-ui-text-supporting-line-height: 20px; --rentops-ui-text-label-size: 14px; --rentops-ui-text-label-weight: 500; --rentops-ui-text-label-line-height: 20px; --rentops-ui-text-chart-size: 12px; --rentops-ui-text-chart-weight: 400; --rentops-ui-text-chart-line-height: 18px; --rentops-ui-text-compact-size: 12px; --rentops-ui-text-compact-weight: 500; --rentops-ui-text-compact-line-height: 18px; --rentops-ui-text-business-size: 22px; --rentops-ui-text-business-weight: 600; --rentops-ui-text-business-line-height: 28px; --rentops-ui-text-comparison-size: 14px; --rentops-ui-text-comparison-weight: 600; --rentops-ui-text-comparison-line-height: 20px; --rentops-ui-color-workspace: #eff1f5; --rentops-ui-color-sidebar: #1a2233; --rentops-ui-color-sidebar-label: #808a9f; --rentops-ui-color-sidebar-text: #98a2b6; --rentops-ui-color-sidebar-text-hover: #e6eaf2; --rentops-ui-color-sidebar-text-strong: #f2f4f8; --rentops-ui-color-sidebar-divider: rgba(255, 255, 255, 0.08); --rentops-ui-color-sidebar-surface-hover: rgba(255, 255, 255, 0.055); --rentops-ui-color-sidebar-surface-active: linear-gradient( 135deg, #1e74ee, #0d5fdd ); /* 行动渐变与投影：只属于主按钮与当前导航（DESIGN.md The One Action Blue Rule） */ --rentops-ui-color-action-gradient: linear-gradient(135deg, #1e74ee, #0d5fdd); --rentops-ui-shadow-action: 0 6px 14px -4px rgba(13, 95, 221, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.16); --rentops-ui-shadow-action-hover: 0 9px 18px -4px rgba(13, 95, 221, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16); --rentops-ui-color-surface: #ffffff; --rentops-ui-color-surface-hover: #f6f7fa; --rentops-ui-color-fill: #f4f5f7; --rentops-ui-color-fill-hover: #eceef2; --rentops-ui-color-border-strong: #d9dde3; --rentops-ui-color-border: #e4e7ec; --rentops-ui-color-divider: #eef0f2; --rentops-ui-color-control-border: #d6dbe4; --rentops-ui-color-text-heading: #1f2329; --rentops-ui-color-text-primary: #252a33; --rentops-ui-color-text-secondary: #555d69; /* 指标标签色（DESIGN.md Label 档指定 ink-3），与 text-muted 区分“数据的题目”和“补充说明” */ --rentops-ui-color-ink-3: #59616e; --rentops-ui-color-text-supporting: #646b76; --rentops-ui-color-text-muted: #6e7681; --rentops-ui-color-ink-4: #6f7682; --rentops-ui-color-text-disabled: #8a929d; --rentops-ui-color-action: #1266e8; --rentops-ui-color-action-strong: #075ce5; --rentops-ui-color-action-soft: #ecf3fe; --rentops-ui-color-progress: #1466e8; --rentops-ui-color-progress-track: #e3edfc; --rentops-ui-color-success: #0c7d45; --rentops-ui-color-success-text: #0a743e; --rentops-ui-color-success-soft: #e8f6ef; --rentops-ui-color-warning: #ac5400; /* 严重程度递进中间档（账龄分级等），不承担状态语义（DESIGN.md Action and Semantic） */ --rentops-ui-color-amber: #ffb020; --rentops-ui-color-danger: #c81e25; --rentops-ui-color-danger-soft: #fcecea; --rentops-ui-color-warning-emphasis-soft: #fbf0e4; --rentops-ui-color-warning-soft: #fff8f2; --rentops-ui-color-warning-border: #f1c9ae; --rentops-ui-color-warning-text: #9a3d12; --rentops-ui-color-warning-strong: #7a2e0b; --rentops-ui-space-xs: 4px; --rentops-ui-space-sm: 8px; --rentops-ui-space-tight: 12px; --rentops-ui-space-base: 16px; --rentops-ui-space-roomy: 20px; --rentops-ui-space-loose: 24px; --rentops-ui-space-xl: 32px; --rentops-ui-space-2xl: 48px; /* 列表家族组件档位（DESIGN.md List Page Anatomy / Control Tiers） */ --rentops-ui-control-height: 34px; --rentops-ui-hit-target-size: 44px; --rentops-ui-control-padding-inline: 10px; --rentops-ui-button-padding-inline: 14px; --rentops-ui-list-toolbar-padding-top: 22px; --rentops-ui-list-row-height: 60px; --rentops-ui-list-pagination-height: 52px; --rentops-ui-list-row-action-size: 28px; --rentops-ui-tag-min-width: 52px; --rentops-ui-tag-padding-block: 3px; --rentops-ui-tag-padding-block-compact: 2px; /* 详情家族组件档位（DESIGN.md Detail Page Anatomy / Control Tiers） */ --rentops-ui-detail-table-head-height: 40px; --rentops-ui-detail-row-height: 48px; --rentops-ui-icon-tile-size: 40px; --rentops-ui-upload-border-width: 1.5px; --rentops-ui-shell-sider-width: 216px; --rentops-ui-shell-header-height: 56px; --rentops-ui-page-gutter: 24px; --rentops-ui-page-gutter-compact: 16px; --rentops-ui-radius-control: 8px; --rentops-ui-radius-navigation: 8px; --rentops-ui-radius-tag: 5px; --rentops-ui-radius-row-action: 7px; --rentops-ui-radius-icon-tile: 10px; --rentops-ui-radius-surface: 12px; --rentops-ui-shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04), 0 8px 24px -8px rgba(16, 24, 40, 0.08); --rentops-ui-shadow-feedback: 0 4px 14px rgba(24, 33, 48, 0.08); --rentops-ui-shadow-control-focus: 0 0 0 2px rgba(18, 102, 232, 0.35); --rentops-ui-shadow-control-focus-subtle: 0 0 0 2px rgba(18, 102, 232, 0.12); --rentops-ui-shadow-control-error-focus: 0 0 0 2px var(--rentops-ui-color-danger-soft); --rentops-ui-shadow-sidebar-active: 0 6px 16px -4px rgba(13, 95, 221, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.18); --rentops-ui-motion-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --rentops-ui-motion-state-instant: 0ms; --rentops-ui-motion-state-fast: 150ms; --rentops-ui-motion-state-standard: 220ms; --rentops-ui-motion-feedback-cycle: 1.1s; --rentops-ui-motion-feedback-ease: ease-in-out; --rentops-ui-motion-decoration: none; /* 状态标签只消费这一张语义表，避免各页直接继承 Semi 调色板。 */ --rentops-ui-color-status-info: #1266e8; --rentops-ui-color-status-info-soft: #ecf3fe; --rentops-ui-color-status-success: #0c7d45; --rentops-ui-color-status-success-soft: #e8f6ef; --rentops-ui-color-status-warning: #ac5400; --rentops-ui-color-status-warning-soft: #fbf0e4; --rentops-ui-color-status-danger: #c81e25; --rentops-ui-color-status-danger-soft: #fcecea; --rentops-ui-color-status-neutral: #59616e; --rentops-ui-color-status-neutral-soft: #f4f5f7; /* * Frozen compatibility aliases used by already accepted pages. New shared * UI must use --rentops-ui-* semantic tokens; removing an alias requires a * dedicated visual-regression change, not opportunistic cleanup. The root * font size is canonical and no longer consumes these aliases. */ --rentops-text-headline-size: 1.25rem; --rentops-text-headline-weight: 600; --rentops-text-headline-line-height: 1.75rem; --rentops-text-title-size: 1rem; --rentops-text-title-weight: 600; --rentops-text-title-line-height: 1.5rem; --rentops-text-body-size: 0.875rem; --rentops-text-body-weight: 400; --rentops-text-body-line-height: 1.25rem; --rentops-text-label-size: 0.875rem; --rentops-text-label-weight: 500; --rentops-text-label-line-height: 1.25rem; --rentops-text-button-size: 0.875rem; --rentops-text-button-weight: 600; --rentops-text-button-line-height: 1.25rem; --rentops-text-caption-size: 0.75rem; --rentops-text-caption-weight: 400; --rentops-text-caption-line-height: 1rem; --rentops-text-metric-size: 1.625rem; --rentops-text-metric-weight: 600; --rentops-text-metric-line-height: 2.125rem; --rentops-text-detail-size: 1.875rem; --rentops-text-detail-weight: 600; --rentops-text-detail-line-height: 2.5rem; --rentops-color-canvas: #f4f5f5; --rentops-color-surface: #ffffff; --rentops-color-border-subtle: #e8eaed; --rentops-color-border-muted: #f2f3f5; --rentops-color-text-primary: #1f2329; --rentops-color-text-secondary: #4c4f54; --rentops-color-text-tertiary: #646a73; --rentops-color-stage: #0f5eea; --rentops-color-stage-strong: #084ed5; --rentops-color-success: #0f8f4e; --rentops-color-warning: #d86b00; --rentops-color-danger: #e3272d; --rentops-space-xs: 4px; --rentops-space-sm: 8px; --rentops-space-tight: 12px; --rentops-space-base: 16px; --rentops-space-loose: 24px; --rentops-space-xl: 32px; --rentops-space-2xl: 48px; --rentops-shell-sider-width: var(--rentops-ui-shell-sider-width); --rentops-shell-header-height: var(--rentops-ui-shell-header-height); --rentops-page-gutter: var(--rentops-ui-page-gutter); --rentops-page-gutter-compact: var(--rentops-ui-page-gutter-compact); --rentops-analysis-cluster-gap: 12px; --rentops-analysis-section-gap: 24px; --rentops-radius-control: var(--rentops-ui-radius-control); --rentops-radius-compact: var(--rentops-ui-radius-navigation); --rentops-radius-surface: var(--rentops-ui-radius-surface); } @media (prefers-reduced-motion: reduce) { :root { --rentops-ui-motion-state-fast: 0ms; --rentops-ui-motion-state-standard: 0ms; } }