/* === 01-variables.css (P416 颜色契约重置:5 原色 + 派生层) === */ /* AI Agent Hub — User Portal */ /* ======================================== 0. CSS 变量（唯一声明位置） P416 颜色契约: - 5 个品牌原色 --theme-bg / --theme-surface / --theme-accent / --theme-primary / --theme-border 是本系统颜色的唯一审美决策点。改色只动这 5 个 + theme-light.css 对应覆盖。 - 所有派生变量从 5 原色用 color-mix() / 透明度生成,不再选具体 hex。 例外:状态色(success/error/warning/info)/ accent / shadow / persona / 头像主题色 是独立色系,本刀不收敛,后续视需要单独处理。 ======================================== */ /* 字体:英文/数字用苹果系统字体,中文用苹方(系统字体栈,见 02-base);不加载网页字体 */ :root { /* P590:向浏览器声明配色方案 — 原生控件(select 弹出选单/滚动条/表单部件) 跟随主题渲染,修暗色下白色滚动条与亮色下拉选单(根因:从未声明 color-scheme) */ color-scheme: dark; /* ── Theme primaries(P416 颜色契约重置:5 个品牌原色,所有派生从此处来)── */ --theme-bg: #0E1118; --theme-surface: #131721; --theme-accent: #C8A96A; --theme-primary: #E8E1D2; --theme-border: rgba(255, 255, 255, 0.08); /* ── Brand(琥珀金,从 --theme-accent 透明度派生)── */ --brand-primary: var(--theme-accent); --brand-primary-hover: color-mix(in srgb, var(--theme-accent) 85%, white); /* 暗色 hover 提亮(white 是亮度调控不是审美色) */ --brand-mark: var(--brand-primary); /* 标志里代表“你”的金点(全标志唯一金色) */ --brand-secondary: #06b6d4; /* 跨色系青色,Info accent 基底,独立色系不动 */ --brand-gradient: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%); --brand-bg-subtle: color-mix(in srgb, var(--theme-accent) 4%, transparent); --brand-bg-light: color-mix(in srgb, var(--theme-accent) 10%, transparent); --brand-bg: color-mix(in srgb, var(--theme-accent) 15%, transparent); --brand-bg-strong: color-mix(in srgb, var(--theme-accent) 25%, transparent); --brand-border: color-mix(in srgb, var(--theme-accent) 30%, transparent); --brand-glow: color-mix(in srgb, var(--theme-accent) 50%, transparent); --brand-dim: color-mix(in srgb, var(--theme-accent) 12%, transparent); --border-glow: color-mix(in srgb, var(--theme-accent) 20%, transparent); /* ── CTA(主操作按钮:发送/新建/编辑/弹窗确认等)── 深色版沿用品牌金身份;浅色版在 theme-light.css 改深墨黑实心(P412 决策)。 P411 临时按钮金色保留走 --brand-* 系列,与本组解耦。 */ --bg-cta-primary: var(--brand-primary); --bg-cta-primary-hover: var(--brand-primary-hover); /* ── Backgrounds(从 --theme-bg / --theme-surface / --theme-primary 派生)── */ --bg-base: var(--theme-bg); --bg-glass: color-mix(in srgb, var(--theme-bg) 60%, transparent); --bg-surface: var(--theme-surface); --bg-surface-hover: color-mix(in srgb, var(--theme-surface) 92%, var(--theme-primary)); --bg-floating: color-mix(in srgb, var(--theme-surface) 97%, var(--theme-primary)); /* 浮层比 surface 略亮 3% */ --bg-card: color-mix(in srgb, var(--theme-surface) 80%, transparent); --bg-hover: color-mix(in srgb, var(--theme-primary) 4%, transparent); --bg-code: color-mix(in srgb, var(--theme-primary) 5%, transparent); --bg-subtle: color-mix(in srgb, var(--theme-primary) 3%, transparent); --bg-active: color-mix(in srgb, var(--theme-primary) 10%, transparent); --bg-layer-1: color-mix(in srgb, var(--theme-surface) 70%, var(--theme-bg)); --bg-layer-2: color-mix(in srgb, var(--theme-bg) 85%, var(--theme-surface)); --bg-deep: color-mix(in srgb, var(--theme-bg) 88%, black); /* 比 base 更深(black 是亮度调控) */ --bg-modal: var(--theme-bg); /* ── Borders(从 --theme-border 派生)── */ --border-glass: color-mix(in srgb, var(--theme-border) 62%, transparent); /* 比 light 更细的边 */ --border-light: var(--theme-border); /* ── Text(从 --theme-primary 派生)── */ --text-main: var(--theme-primary); --text-bright: color-mix(in srgb, var(--theme-primary) 92%, white); /* 暗色版提亮 */ --text-muted: color-mix(in srgb, var(--theme-primary) 68%, transparent); --text-dim: color-mix(in srgb, var(--theme-primary) 42%, transparent); --text-secondary: var(--text-muted); /* 阅读正文:比主文字暗一级,让加粗/标题(--text-bright)跳出来;深色下不刺眼 */ --text-body: color-mix(in srgb, var(--text-main) 84%, var(--chat-main-bg)); --text-tertiary: var(--text-dim); --text-code: color-mix(in srgb, var(--theme-primary) 85%, var(--theme-bg)); --text-on-color: var(--theme-bg); /* ── Chat role colors(P417:对话角色语义,从 5 原色派生)── */ --chat-main-bg: var(--theme-bg); --user-message-bg: color-mix(in srgb, var(--theme-accent) 18%, var(--theme-surface)); /* 暖金灰:深底里只透一点金 */ --user-message-text: var(--text-bright); --user-message-border: transparent; --send-bg: var(--theme-accent); --send-bg-hover: var(--brand-primary-hover); --send-text: var(--theme-bg); /* ── Status colors(独立色系,跨主题保持识别度;P416 不收敛)── */ --success-color: #34C759; --success-bg: rgba(52, 199, 89, 0.15); --success-bg-light: rgba(52, 199, 89, 0.1); --success-border: rgba(52, 199, 89, 0.4); --success-glow: rgba(52, 199, 89, 0.3); --error-color: #FF3B30; --error-text: #FF6B6B; /* 暗底对比优化:正文错误文字用这个更清晰 */ --error-bg: rgba(255, 59, 48, 0.1); --error-bg-strong: rgba(255, 59, 48, 0.2); --error-border: rgba(255, 59, 48, 0.2); --error-border-strong: rgba(255, 59, 48, 0.25); --warning-color: #FF9500; --warning-bg: rgba(255, 149, 0, 0.1); --warning-border: rgba(255, 149, 0, 0.25); --info-color: var(--brand-secondary); --info-bg: rgba(6, 182, 212, 0.15); --info-bg-subtle: rgba(6, 182, 212, 0.08); --info-bg-strong: rgba(6, 182, 212, 0.12); --info-border: rgba(6, 182, 212, 0.2); /* ── Accent colors(独立色系,P416 不收敛)── */ --accent-green: #34c759; --accent-red: #ff453a; --accent-blue: #06b6d4; --accent-orange: #ffa500; --accent-orange-light: #ff9f0a; --accent-cyan: #22d3ee; --cyan-border: rgba(34, 211, 238, 0.2); --cyan-border-light: rgba(34, 211, 238, 0.15); /* ── Neutral ── */ --neutral-bg: rgba(142, 142, 147, 0.12); --neutral-color: #8e8e93; /* ── Sidebar(别名,自动跟随)── */ --sidebar-bg: var(--bg-surface); --sidebar-hover: var(--bg-surface-hover); --sidebar-border: var(--border-glass); /* ── Shadow / Misc(独立色系,P416 不动)── */ --shadow-overlay: rgba(0, 0, 0, 0.5); --shadow-deep: rgba(0, 0, 0, 0.85); /* P413 扁平化:从 "0 20px 40px rgba(0,0,0,0.4)" 重阴影 → 单层柔影 */ --shadow-ambient: 0 1px 3px rgba(0, 0, 0, 0.16); --gradient-shimmer: linear-gradient(90deg, var(--text-main), #e2e8f0); /* ── Persona 维度色 ── */ --persona-rose: #f43f5e; /* ── Design tokens（间距/圆角/动画） ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --radius-sm: 8px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 9999px; /* ── PC layout tokens(P428 PC 全屏空间骨架第一刀)── PC shell 外层 padding / gap / 三栏宽度的单一源头,避免数字散落在 08-responsive.css 和 10-feature-panel.css 各写一套(铁律 14 不重复)。 仅作用于 @media (min-width: 1024px),移动端不消费。 */ --pc-shell-padding: var(--space-4); /* 16px,外层四周 padding */ --pc-shell-gap: var(--space-4); /* 16px,三栏 grid gap */ --pc-nav-width: 64px; /* 极窄图标导航条 */ --pc-sidebar-width: 320px; /* 顾问列表岛 */ --pc-feature-panel-width: 320px; /* 能力配置岛 */ /* ── 系统顶部区(全站唯一源头,L190)── 屏幕顶端归系统:状态栏 + iPhone 主屏 App(iOS 26 起)叠在页面最上方的渐变模糊带。 各页顶栏、抽屉、面板、弹层的背景/玻璃可以铺进这块区域,文字和按钮必须落在 --app-top-inset 以下。 模糊带只出现在 iOS 主屏 App:用 display-mode + iOS 独有的 -webkit-touch-callout 识别(不读 UA), Safari 标签页、安卓、电脑为 0。新增顶部元素一律用 --app-top-inset,不再直接写 env(safe-area-inset-top)。 */ --system-blur-clear: 0px; --app-top-inset: calc(env(safe-area-inset-top, 0px) + var(--system-blur-clear)); --transit-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transit-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transit-slow: 400ms cubic-bezier(0.16, 1, 0.3, 1); --transit-bounce: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性回弹(按钮/卡片微交互) */ --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Courier New", monospace; /* P429:衬线字体 token — 中文宋体优先(mac/iOS Songti SC / Win SimSun / Android-Linux Noto Serif CJK),英文走 Georgia,书卷哲学气; 由 .sidebar-slogan 等局部消费,不改全局正文字体 */ --font-serif: "Songti SC", "STSong", "SimSun", "宋体", "Noto Serif CJK SC", "Noto Serif", Georgia, serif; } @media (display-mode: standalone) { @supports (-webkit-touch-callout: none) { /* 真机实测:系统模糊带在状态栏下约 32pt 处淡出(状态栏下 26pt 处已淡去九成); 名字上沿距顶栏内容区顶 8px,让位 18 时名字在淡出区末端,用户选定;再低字顶会发虚 */ :root { --system-blur-clear: 18px; } } }