/* ════════════════════════════════════════════════════════════════════════ ★ tokens.css · v2 BRAND TOKEN · SOT (single source of truth) ──────────────────────────────────────────────────────────────────────── 跨 context 共享: PPT (templates) + Gallery (index.html) + 未来 Admin 规则: ANY context 引用此文件; 各自的 primitives.css 在此基础上扩展 架构: :root = light pack default (实值) [data-pack=dark] = dark pack override (任元素可加, 不仅 .ds-slide) ════════════════════════════════════════════════════════════════════════ */ :root { /* ════════════════════════════════════════════════════════════════════ ① FONT ──────────────────────────────────────────────────────────────────── */ --f-cn: 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif; --f-en: 'Inter', 'Helvetica Neue', sans-serif; --f-mono: 'JetBrains Mono', 'Fira Code', 'Inter', 'Noto Sans SC', monospace; --f-serif: 'Playfair Display', 'Source Serif Pro', 'Songti SC', Georgia, serif; /* ════════════════════════════════════════════════════════════════════ ② RADIUS · brutalist sharp 0-8px ──────────────────────────────────────────────────────────────────── */ --r-0: 0px; --r-xs: 4px; /* legacy alias used by demo-shell primitives */ --r-sm: 4px; /* default: card / button / badge */ --r-md: 6px; /* image slot / large card */ --r-lg: 8px; /* 最大 · 罕用 */ --r-xl: 8px; /* alias to --r-lg (压旧 18 → 8) */ --r-2xl: 8px; /* alias to --r-lg (压旧 24 → 8) */ --r-pill: 9999px; /* 仅 chip / pill 例外 */ --card-radius: var(--r-sm); /* ════════════════════════════════════════════════════════════════════ ③ SHADOW · 商务 SaaS 克制风 (Stripe / Linear / Notion family) ──────────────────────────────────────────────────────────────────── 绝不用: ❌ 大 blur 软 fluffy (Claude/Material) ❌ 硬黑 offset brutalist 用: ✅ 小 blur (1-8px) + 低 opacity (4-10%) + 可叠层 + 可加 hairline ──────────────────────────────────────────────────────────────────── */ --shadow-none: none; /* Catlaxy default · 商务 visible baseline (2026-05-11 bump · 4-6% 太subtle 看不出 → 6/8/12) */ --shadow-xs: 0 1px 2px rgba(15,23,42,0.06); /* subtle hover · table row 类 */ --shadow-sm: 0 1px 3px rgba(15,23,42,0.08), 0 1px 1px rgba(15,23,42,0.06); /* card rest */ --shadow-md: 0 2px 4px rgba(15,23,42,0.12), 0 6px 12px rgba(15,23,42,0.08); /* card hover · default emphasis */ --shadow-lg: 0 2px 6px rgba(15,23,42,0.08), 0 8px 24px rgba(15,23,42,0.06); /* hero card / modal lift */ --shadow-brand: 0 1px 3px rgba(15,23,42,0.06), 0 8px 20px rgba(0,120,252,0.12); /* brand-tinted soft glow */ --shadow-rose: 0 1px 3px rgba(15,23,42,0.06), 0 8px 20px rgba(232,23,93,0.10); /* rose-tinted */ --shadow-elevated: 0 30px 80px rgba(15,23,42,0.16); /* iframe wrap (gallery) · 大 lift */ /* alias · 旧名兜底 (templates 仍引) */ --shadow-card: var(--shadow-sm); --shadow-card-strong: var(--shadow-lg); --shadow-hard: var(--shadow-md); --shadow-strong: var(--shadow-md); --shadow-soft: var(--shadow-sm); /* ════════════════════════════════════════════════════════════════════ ④ BORDER · 标准化 1/2 px ──────────────────────────────────────────────────────────────────── */ --border-hairline: 1px solid var(--c-line); --border-default: 2px solid var(--c-line); --border-strong: 2px solid var(--c-title); --border-brand: 2px solid var(--c-blue); --border-rose: 2px solid var(--c-rose); /* ════════════════════════════════════════════════════════════════════ ④a RING · functional outline (status / dot 描边 / 双色环) 不是装饰 shadow · 是 box-shadow 0 0 0 N 当作 outline 替代品 用 case: timeline.tl-dot, chain.step-icon, survey.bar.peak (peak 高亮) ──────────────────────────────────────────────────────────────────── */ --ring-line: 0 0 0 2px var(--c-line); /* 普通 dot 描边 */ --ring-brand: 0 0 0 2px var(--c-blue); /* 高亮 dot · peak 描边 */ --ring-rose: 0 0 0 2px var(--c-rose); --ring-strong: 0 0 0 2px var(--c-title); --ring-inset-brand: 0 0 0 2px var(--c-blue) inset; /* 进度条 peak 内描边 */ /* ════════════════════════════════════════════════════════════════════ ⑤ MOTION · 全 0 = PPT 静态 · 但 hover/transition 要时长 → --duration-hover ──────────────────────────────────────────────────────────────────── */ --duration-instant: 0ms; --duration-fast: 0ms; --duration-normal: 0ms; --duration-slow: 0ms; --duration-hover: 150ms; /* hover 切换专用 · 不是 PPT 动画 */ --easing-default: cubic-bezier(0.4, 0, 0.2, 1); --easing-decisive: cubic-bezier(0.85, 0, 0.15, 1); /* ════════════════════════════════════════════════════════════════════ ⑥ HOVER · 实值 token · 全库 card-like primitive 引用 ──────────────────────────────────────────────────────────────────── */ --hover-enabled: 1; /* 1 = on (gallery + 未来 web app) */ --hover-tint: var(--c-brand); --hover-shadow: var(--shadow-md); /* hover 升一档 (sm → md) · 跟新商务 shadow ladder */ --hover-translate: -1px; /* lift up · 商务 SaaS 风 1px 已足 (不夸张) */ --hover-border: var(--c-brand); /* hover border 染 brand */ --hover-bg-tint: var(--c-brand-tint-04); /* hover 微微 brand bg */ --hover-scale: 1.0; --focus-ring: 2px solid var(--c-blue); --focus-offset: 2px; /* ════════════════════════════════════════════════════════════════════ ⑦ OPACITY · alpha 阶 (用于 .opacity / `--alpha-*` raw 值) ──────────────────────────────────────────────────────────────────── */ --alpha-disabled: 0.4; --alpha-muted: 0.65; --alpha-overlay: 0.8; --alpha-ghost: 0.15; /* ════════════════════════════════════════════════════════════════════ ⑦a TINT / OVERLAY · color-mix runtime composition ──────────────────────────────────────────────────────────────────── */ /* brand tint · 跟 --c-brand 自动 swap (light=blue, dark=light-blue, kraft=terracotta) */ --c-brand-tint-04: color-mix(in srgb, var(--c-brand) 4%, transparent); --c-brand-tint-08: color-mix(in srgb, var(--c-brand) 8%, transparent); --c-brand-tint-10: color-mix(in srgb, var(--c-brand) 10%, transparent); --c-brand-tint-12: color-mix(in srgb, var(--c-brand) 12%, transparent); --c-brand-tint-16: color-mix(in srgb, var(--c-brand) 16%, transparent); --c-brand-line-30: color-mix(in srgb, var(--c-brand) 30%, transparent); --c-brand-line-40: color-mix(in srgb, var(--c-brand) 40%, transparent); --c-brand-line-50: color-mix(in srgb, var(--c-brand) 50%, transparent); /* overlay · subtle on-surface · 自适应 (light=darken text, dark=whiten) */ --c-overlay-02: color-mix(in srgb, var(--c-text-strong) 2%, transparent); --c-overlay-04: color-mix(in srgb, var(--c-text-strong) 4%, transparent); --c-overlay-08: color-mix(in srgb, var(--c-text-strong) 8%, transparent); --c-overlay-12: color-mix(in srgb, var(--c-text-strong) 12%, transparent); --c-overlay-16: color-mix(in srgb, var(--c-text-strong) 16%, transparent); --c-overlay-60: color-mix(in srgb, var(--c-text-strong) 60%, transparent); /* status tint · 跟随 --c-warning / --c-danger / --c-success swap */ --c-warn-tint-10: color-mix(in srgb, var(--c-warning) 10%, transparent); --c-warn-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); --c-danger-tint-10: color-mix(in srgb, var(--c-danger) 10%, transparent); --c-danger-line-50: color-mix(in srgb, var(--c-danger) 50%, transparent); --c-success-tint-10: color-mix(in srgb, var(--c-success) 10%, transparent); /* rose tint · 跟 --c-rose swap */ --c-rose-tint-08: color-mix(in srgb, var(--c-rose) 8%, transparent); --c-rose-line-40: color-mix(in srgb, var(--c-rose) 40%, transparent); /* on-brand overlay · 用在 brand-bg 之上的 chip / pill (always white tint) */ --c-on-brand-tint-18: color-mix(in srgb, var(--c-text-on-brand) 18%, transparent); --c-on-brand-tint-30: color-mix(in srgb, var(--c-text-on-brand) 30%, transparent); --c-text-on-brand-50: color-mix(in srgb, var(--c-text-on-brand) 50%, transparent); /* on-brand 文字半透 · 50/70/85 三阶 */ --c-text-on-brand-70: color-mix(in srgb, var(--c-text-on-brand) 70%, transparent); --c-text-on-brand-85: color-mix(in srgb, var(--c-text-on-brand) 85%, transparent); /* ════════════════════════════════════════════════════════════════════ ⑦c STATUS COLOR TINT SYSTEM · 标准 status 颜色应用 (success/danger/warning/info) ──────────────────────────────────────────────────────────────────── 体系跟 --c-brand-tint-* / --c-brand-line-* 一致 · 通用 across templates. 模板可直接引用 · 客户可 override semantic color (改 --c-success / --c-danger 等). ──────────────────────────────────────────────────────────────────── */ --c-success-tint-08: color-mix(in srgb, var(--c-success) 8%, transparent); --c-success-tint-12: color-mix(in srgb, var(--c-success) 12%, transparent); --c-success-line-50: color-mix(in srgb, var(--c-success) 50%, transparent); --c-danger-tint-08: color-mix(in srgb, var(--c-danger) 8%, transparent); --c-danger-tint-12: color-mix(in srgb, var(--c-danger) 12%, transparent); --c-danger-line-50: color-mix(in srgb, var(--c-danger) 50%, transparent); --c-warning-tint-08: color-mix(in srgb, var(--c-warning) 8%, transparent); --c-warning-tint-12: color-mix(in srgb, var(--c-warning) 12%, transparent); --c-warning-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); /* info · 友好提示 (区别于 warning 警告) · 暖橙 amber-darker */ --c-info: #92400E; /* deeper amber for text */ --c-info-tint-08: color-mix(in srgb, var(--c-info) 8%, transparent); --c-info-tint-12: color-mix(in srgb, var(--c-info) 12%, transparent); --c-info-line-50: color-mix(in srgb, var(--c-info) 50%, transparent); /* ════════════════════════════════════════════════════════════════════ ⑦b CHART PALETTE · brand-driven · 单 hue 多阶 (跟 survey-bars 同语言) ──────────────────────────────────────────────────────────────────── 原则: NOT 生产 6 色 (浅蓝/蓝绿/暖橙/浅紫/灰/灰) — 那个跟品牌色脱钩 用: brand 单 hue 5-6 阶 · 通过 alpha 制造层次 · 跟 brand 同步 swap 语义: chart-1 = primary (主指标 · brand 实色) chart-2 = peer (对照 · brand 60% 阶) chart-3 = third (兼参考 · brand 40% 阶) chart-4 = muted (背景 · brand-tint-30) chart-axis = 轴线 / 网格 (--c-line · 1px hairline) chart-label = 轴标签 (--c-text-muted) chart-emphasis = peak / KPI 数字 (--c-text-strong + brand 高亮) chart-negative = 负向 / 警示 (--c-rose · 量化 negative 时用) ──────────────────────────────────────────────────────────────────── */ --chart-1: var(--c-brand); /* 主 · 实色 */ --chart-2: var(--c-brand-60); /* 副 · 中阶 */ --chart-3: var(--c-brand-40); /* 三 · 浅阶 */ --chart-4: color-mix(in srgb, var(--c-brand) 30%, transparent); /* 背景 · brand-tint 30 */ --chart-5: color-mix(in srgb, var(--c-brand) 15%, transparent); /* 兜底 · brand-tint 15 */ --chart-axis: var(--c-line); /* 轴线 / 网格 */ --chart-label: var(--c-text-muted); /* 轴标签 */ --chart-emphasis: var(--c-text-strong); /* peak 数字 */ --chart-negative: var(--c-rose); /* 负向 (量化) */ /* ════════════════════════════════════════════════════════════════════ ⑧ GRADIENT · slot · default none · future style pack 启用 ──────────────────────────────────────────────────────────────────── */ --gradient-brand: none; --gradient-radial: none; --gradient-text: none; /* ════════════════════════════════════════════════════════════════════ ⑨ COLOR (light pack default) · 全 token + v1 alias ──────────────────────────────────────────────────────────────────── */ /* primitive · 5 阶 brand */ --blue-100: #0078FC; --blue-80: #0060D0; --blue-60: #4DA6FF; --blue-40: #80D4FF; --blue-10: #EFF6FF; --gray-900: #111827; --gray-700: #374151; --gray-500: #6B7280; --gray-300: #9CA3AF; --gray-200: #E5E7EB; --gray-100: #F3F4F6; --warm-50: #FAFAF8; --pure-white: #FFFFFF; --green-500: #10B981; --red-500: #EF4444; --amber-500: #F59E0B; /* semantic role · 跨 context 共用 */ --c-brand: var(--blue-100); --c-brand-80: var(--blue-80); --c-brand-60: var(--blue-60); --c-brand-40: var(--blue-40); --c-brand-10: var(--blue-10); --c-canvas: var(--warm-50); /* page bg · P1 暖白 */ --c-canvas-pure: #FFFFFF; /* immune-white · 不参与 pack swap · brand panel 内嵌白卡 / case-study 主框 用 */ --c-surface: var(--pure-white); /* card bg */ --c-surface-tint: var(--blue-10); --c-paper: var(--warm-50); --c-card: var(--pure-white); --c-card-strong: var(--gray-100); --c-bg: var(--warm-50); --c-gallery-bg: #F4F5F7; /* gallery shell background · outside slide canvas */ --c-text: var(--gray-900); --c-text-strong: var(--gray-900); --c-text-muted: var(--gray-500); --c-text-on-brand: var(--pure-white); --c-text-on-emphasis: var(--pure-white); /* ★ light: white text · 用在 chart-emphasis pill BG 上 (e.g. funnel inside label) */ /* ★ 2026-05-11 round 2 · pill immune tokens · 跨 pack 永远白底深字 (e.g. funnel inside label · scatter point pill · 锁 BG/text 让 light + dark 一致) */ --c-pill-bg-immune: #FFFFFF; --c-pill-text-immune: var(--gray-900); --c-secondary: var(--gray-700); --c-muted: var(--gray-500); --c-disabled: var(--gray-300); --c-title: var(--gray-900); --c-primary: var(--gray-900); --c-line: var(--gray-200); /* universal hairline · P2 */ --c-line-1: var(--gray-200); --c-line-2: var(--gray-100); --c-divider: var(--gray-200); /* rose · semantic negative (caution / DON'T / 划掉) · 不再 alias 到 brand */ --c-rose: #E8175D; --c-rose-60: #C2104D; --c-rose-40: #FF5A89; --c-rose-10: #FFF1F2; --c-rose-line: var(--c-rose-line-40); /* status semantic */ --c-success: var(--green-500); --c-danger: var(--red-500); --c-warning: var(--amber-500); --c-success-10: #ECFDF5; --c-danger-10: #FEF2F2; /* v1 alias (旧 template / catlaxy-ds.css 用) */ --c-blue: var(--c-brand); --c-blue-60: var(--c-brand-60); --c-blue-40: var(--c-brand-40); --c-blue-20: var(--c-brand-40); --c-blue-10: var(--c-brand-10); --c-blue-ghost: var(--c-brand-tint-04); --c-blue-line: var(--c-brand-40); --c-white: var(--c-surface); --c-amber: var(--c-warning); --c-cyan: #0EA5E9; --c-orange: #FF6B2B; --c-dark: #0F1623; --c-dark-card: #1A2233; /* ════════════════════════════════════════════════════════════════════ ⑩ SPACING + TYPE STOPS (借 catlaxy-ds.css v1 · 未来 v3 重定义) ──────────────────────────────────────────────────────────────────── */ --s-1: 4px; --s-1-5: 6px; --s-2: 8px; --s-2-5: 10px; --s-3: 12px; --s-3-5: 14px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-6-5: 28px; --s-7: 32px; --s-8: 40px; --s-8-5: 44px; --s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 120px; --slide-pad: 130px; --slide-pad-x: 130px; --slide-safe-top: 160px; --slide-safe-bot: 130px; /* type token (catlaxy-ds.css v1 reference, kept for backward compat) ★ 2026-05-10 audit 后扩展: +3 display token (cover 84-280px range) */ --t-hero: 110px; --t-h1: 60px; --t-h2: 44px; --t-h3: 36px; --t-body-xl: 36px; /* legacy alias used by catlaxy-ds.css */ --t-title-lg: 32px; /* 中型 title · h3 跟 body-lg 之间 */ --t-title-sm: 30px; /* 中小型 title · prose-side 等 */ --t-body-lg: 28px; --t-prose-lead: 26px; /* prose 引言段 · body-lg 跟 body 之间 */ --t-section: 24px; /* section sub-header · 中段大字 */ --t-body: 22px; --t-section-sm: 21px; /* sub-section 略小 */ --t-body-sm: 20px; --t-body-md: 19px; /* body 中段 · 跟 body-sm 略大 */ --t-caption: 17px; /* table body / chart takeaway · body-sm 跟 label 之间 */ --t-cap: 18px; /* legacy alias used by catlaxy-ds.css */ --t-label: 14px; --t-xs: 12px; /* gallery chip · small UI text · 比 --t-label 小一级 */ /* display 大字号 · bookend / before-after / mega-quote 用 */ --t-h1-sm: 52px; /* h1 略小 · action-title cover 49-55 */ --t-h2-lg: 48px; /* h2 略大 · agenda 大数字 */ --t-h3-lg: 40px; /* h3 略大 · agenda sub-num */ --t-display: 96px; /* bookend chapter h1 · cover 84/96/120 */ --t-stat: 144px; /* before-after hero stat · 大数字 */ --t-mega: 200px; /* bookend close · mega-quote · 大型标语 */ --t-mega-num: 280px; /* bookend chapter "01/02" 巨数字 · 比 --t-mega 大 */ /* line-height · 2026-05-10 +2 for display + middle */ --lh-tight: 1.1; --lh-snug: 1.25; --lh-cozy: 1.4; /* between snug 跟 normal · cover 1.3/1.4/1.45 */ --lh-cozy-md: 1.5; /* 中段松 · cover 1.5 */ --lh-normal: 1.55; --lh-relaxed: 1.7; --lh-display: 1.0; /* display 字号必 tight · cover 0.9/1.0/1.02/1.05/1.08 */ /* letter-spacing · 2026-05-10 +3 for display tight series */ --ls-snug: -0.01em; --ls-wide: 0.04em; /* subtle wide · code/diff/process tag */ --ls-label-md: 0.1em; /* mid wide · matrix tag */ --ls-label: 0.16em; /* default mono UPPER eyebrow */ --ls-tight: -0.5px; /* body subtle · cover -0.2/-0.3/-0.5 */ --ls-tighter-sm: -1px; /* tighter 微 · agenda 数字 / open title */ --ls-tighter: -2px; /* display tight · cover -1.5/-2 */ --ls-display-md: -3px; /* display 中 tight · open title -3 */ --ls-display-lg: -6px; /* display 大 tight · close Thanks · 比 mega 松 */ --ls-mega: -10px; /* mega tight · chapter -10 */ /* legacy card / icon (v1 alias) */ --card-border: var(--border-hairline); --icon-circle: 64px; --icon-border: var(--border-hairline); --icon-inner: 28px; --bar-thickness: 3px; --bar-h-sub: 16px; /* ════════════════════════════════════════════════════════════════════ ⑪ CARD COMPONENT TOKENS · 单点 tune · cards/pillars/tool-grid 等共用 ──────────────────────────────────────────────────────────────────── */ /* ────────── Tier 3 · CARD COMMITMENT TOKENS ────────── :root 默认 = Catlaxy commitment (商务 SaaS subtle) 每 theme scope override 这些 token · 切 theme 整体卡视觉跟切 2026-05-11 expanded per THEME_BRIEFS · depth strategy holistic */ --card-padding: 36px; /* ★ Phase 5 · per-theme commit (Klein 48 air / Imperial 32 dense / Peri 40 modern) */ --card-padding-sm: var(--s-6); --card-gap: var(--s-4); --card-shadow: var(--shadow-sm); /* depth · default subtle */ --card-shadow-hover: var(--shadow-md); --card-translate-hover: var(--hover-translate); /* legacy alias · keep for back-compat */ --card-border-color-default: var(--c-line); --card-border-color-hover: var(--hover-border); --card-border-width-default: 1px; /* 0 / 1 / 2 · per-theme commit */ --card-border-width-hover: 2px; --hover-transform: translateY(-1px); /* depth strategy · per-theme commit (lift/static/brutalist-shift/bouncy) */ --type-display-weight: 900; /* heading weight · per-theme commit (Klein 700 thin / Imperial 900 heavy) */ /* ════════════════════════════════════════════════════════════════════ ⑪b · Phase 5 · 5 NEW TIER 3 DIMENSIONS · 2026-05-11 ──────────────────────────────────────────────────────────────────── 用户反馈: Phase 4 之后 12 themes 看不出差异 → 加 5 dim 让 character 真 visible. 设计哲学: 每 theme 是 visual identity · 不只是换 brand 色 dim 1: bg-pattern · 整张 slide 底层质感 (paper texture / radial / linen / none) dim 2: anchor (num) · ncard-num 字体/字重/底线 (帝皇 stamp / klein gallery / kraft serif) dim 3: em accent · em 跳色 visual emphasis (Imperial heavy / Klein italic / Onyx glow) dim 4: type display · h1/h2/h3 letter-spacing (Klein air 1.5 / Imperial -1 / Tiffany 1) dim 5: card padding · 卡内 spacing (Klein 48 air / Imperial 32 dense) ──────────────────────────────────────────────────────────────────── */ /* Dim 1 · slide bg pattern · :root none (Catlaxy 商务 flat default) */ --bg-pattern: none; /* Dim 2 · anchor (numbered card primitive 数字 anchor) Catlaxy default: f-en 900 tighter · no decoration (商务 clean baseline) */ --anchor-font-family: var(--f-en); --anchor-weight: 900; --anchor-decoration: none; --anchor-letter-spacing: var(--ls-tighter); --anchor-color: var(--c-brand); /* Dim 3 · em emphasis (运行 text 内 跳色) Catlaxy default: brand color + 700 + no decoration (商务 simple) */ --em-color: var(--c-brand); --em-weight: 700; --em-style: normal; /* normal / italic */ --em-decoration: none; /* none / underline / overline */ --em-background: transparent; /* transparent / brand-tint */ --em-padding: 0; /* 0 / 2px 6px · 当 bg 非透明时 */ --em-text-shadow: none; /* none / 0 0 8px brand (Onyx 专属 glow) */ /* Dim 4 · display typography tracking (h1/h2/h3 letter-spacing) Catlaxy default: ls-tighter (-0.5px) · 商务 dense */ --type-display-tracking: var(--ls-tight); /* -0.5px tight 商务 default */ /* ════════════════════════════════════════════════════════════════════ ⑫ CLIP SAFE MARGIN · 全局 shadow/lift 安全区 ──────────────────────────────────────────────────────────────────── */ /* 商务 SaaS shadow blur 最大 24px (shadow-lg layered), 加 1px translate. 给 ds-body overflow-clip-margin 16px 留缓冲 (大部分模板够 · slab callout 通常居中不靠边) */ --clip-safe-margin: 16px; } /* ════════════════════════════════════════════════════════════════════════ ★ BRAND-DERIVED TOKENS · re-declared on .ds-slide (2026-05-11 CRITICAL fix) ──────────────────────────────────────────────────────────────────────── CSS quirk: when --X: var(--c-brand) is declared on :root, the var() is substituted AT :root, producing a COMPUTED value (= root's blue brand). Descendants inherit that COMPUTED value, NOT the original var() chain. So [data-pack="kraft"] overriding --c-brand on .ds-slide doesn't make --anchor-color / --em-color / --hover-border etc. swap — they're stuck at :root's blue. Fix: re-declare every brand-derived token on .ds-slide. .ds-slide is where [data-pack=X] applies, so substitution recomputes per slide using the theme's --c-brand. Single rule covers all 12 themes. Same rule color-mix() declaration-scope quirk handled per-theme already. ──────────────────────────────────────────────────────────────────────── */ .ds-slide, [data-pack] { /* Covers BOTH .ds-slide (templates) AND [data-pack] (brand panel preview). Any element with data-pack attribute gets the brand-derived chain re-evaluation, so preview matches templates. */ /* === HOVER state (brand-tinted hover effects) === */ --hover-tint: color-mix(in srgb, var(--c-brand) 8%, transparent); --hover-border: var(--c-brand); --hover-bg-tint: color-mix(in srgb, var(--c-brand) 4%, transparent); /* === CARD border (Tier 3 commits · --hover-border / --c-line chain) === */ --card-border-color-default: var(--c-line); --card-border-color-hover: var(--hover-border); /* === GENERIC border roles (used by gallery + v1 deck · chain through themed --c-*) === */ --border-hairline: var(--c-line); --border-default: var(--c-line); --border-strong: var(--c-title); --border-brand: var(--c-brand); --border-rose: var(--c-rose); /* === ANCHOR (numbered card primitive · ncard-num color) === */ --anchor-color: var(--c-brand); /* === EM emphasis (in-text em color) === */ --em-color: var(--c-brand); /* === CHART tokens (ECharts series colors · 跟 brand swap) === */ --chart-1: var(--c-brand); --chart-2: var(--c-brand-60); --chart-3: var(--c-brand-40); /* === v1 LEGACY ALIASES (catlaxy-ds.css + 53 template usages · 跟 brand swap) === */ --c-blue: var(--c-brand); --c-blue-60: var(--c-brand-60); --c-blue-40: var(--c-brand-40); --c-blue-20: var(--c-brand-40); --c-blue-10: var(--c-brand-10); --c-blue-line: var(--c-brand-line-40); --c-blue-ghost: var(--c-brand-tint-04); --c-white: var(--c-surface); --c-amber: var(--c-warning); /* === FOCUS / RING (interactive state) === */ --focus-ring: 0 0 0 3px color-mix(in srgb, var(--c-brand) 25%, transparent); --ring-line: 0 0 0 2px var(--c-line); --ring-strong: 0 0 0 2px var(--c-title); --ring-brand: 0 0 0 2px var(--c-brand); --ring-rose: 0 0 0 2px var(--c-rose); --ring-inset-brand: inset 0 0 0 2px var(--c-brand); /* === OVERLAY tints (chained from --c-text-strong · used by matrix-quadrant 等) === */ --c-overlay-02: color-mix(in srgb, var(--c-text-strong) 2%, transparent); --c-overlay-04: color-mix(in srgb, var(--c-text-strong) 4%, transparent); --c-overlay-08: color-mix(in srgb, var(--c-text-strong) 8%, transparent); --c-overlay-12: color-mix(in srgb, var(--c-text-strong) 12%, transparent); --c-overlay-16: color-mix(in srgb, var(--c-text-strong) 16%, transparent); --c-overlay-60: color-mix(in srgb, var(--c-text-strong) 60%, transparent); /* === ON-BRAND tints (semi-transparent white on brand-filled card) === */ --c-on-brand-tint-18: color-mix(in srgb, var(--c-text-on-brand) 18%, transparent); --c-on-brand-tint-30: color-mix(in srgb, var(--c-text-on-brand) 30%, transparent); --c-text-on-brand-50: color-mix(in srgb, var(--c-text-on-brand) 50%, transparent); --c-text-on-brand-70: color-mix(in srgb, var(--c-text-on-brand) 70%, transparent); --c-text-on-brand-85: color-mix(in srgb, var(--c-text-on-brand) 85%, transparent); /* === STATUS color tints (success / danger / warning / info / rose) === */ --c-success-tint-08: color-mix(in srgb, var(--c-success) 8%, transparent); --c-success-tint-10: color-mix(in srgb, var(--c-success) 10%, transparent); --c-success-tint-12: color-mix(in srgb, var(--c-success) 12%, transparent); --c-success-line-50: color-mix(in srgb, var(--c-success) 50%, transparent); --c-danger-tint-08: color-mix(in srgb, var(--c-danger) 8%, transparent); --c-danger-tint-10: color-mix(in srgb, var(--c-danger) 10%, transparent); --c-danger-tint-12: color-mix(in srgb, var(--c-danger) 12%, transparent); --c-danger-line-50: color-mix(in srgb, var(--c-danger) 50%, transparent); --c-warning-tint-08: color-mix(in srgb, var(--c-warning) 8%, transparent); --c-warning-tint-12: color-mix(in srgb, var(--c-warning) 12%, transparent); --c-warning-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); --c-warn-tint-10: color-mix(in srgb, var(--c-warning) 10%, transparent); /* legacy alias */ --c-warn-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); /* legacy alias */ --c-info-tint-08: color-mix(in srgb, var(--c-info) 8%, transparent); --c-info-tint-12: color-mix(in srgb, var(--c-info) 12%, transparent); --c-info-line-50: color-mix(in srgb, var(--c-info) 50%, transparent); --c-rose-tint-08: color-mix(in srgb, var(--c-rose) 8%, transparent); --c-rose-line-40: color-mix(in srgb, var(--c-rose) 40%, transparent); /* === CHART helpers (chained from --c-brand / --c-line / --c-text-muted / --c-text-strong / --c-rose) === */ --chart-4: color-mix(in srgb, var(--c-brand) 30%, transparent); --chart-5: color-mix(in srgb, var(--c-brand) 15%, transparent); --chart-axis: var(--c-line); --chart-label: var(--c-text-muted); --chart-emphasis: var(--c-text-strong); --chart-negative: var(--c-rose); } /* ════════════════════════════════════════════════════════════════════════ ★ DARK PACK · 已删除 2026-05-11 ──────────────────────────────────────────────────────────────────────── 原因: 反复出 immune chain bug · audit 找不到 root cause · 经 user 决策删除 未来: Theme system reinstate 时 · 加 `Theme_Onyx` 作 standard 系列的 dark (单独 theme · 不是 mode toggle · 跟 Klein/Tiffany/Hermès 并列) 保留: --c-dark / --c-dark-card 在 :root v1 alias (catlaxy-ds.css v1 deck 引用) ──────────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ ★ EDITORIAL PACK · token swap · 杂志 / 编辑感 ──────────────────────────────────────────────────────────────────────── 语义: parchment substrate + terracotta brand + ivory paper card + serif title 选择器范围: 任元素 (跟 dark 同结构) · brand panel + .ds-slide 共用 ──────────────────────────────────────────────────────────────────────── */ .ds-slide[data-pack="kraft"], .ds-slide.kraft, [data-pack="kraft"] { /* surface */ --c-canvas: #F5F0E6; /* parchment substrate */ --c-surface: #FAF7F0; /* ivory paper */ --c-surface-tint: #FAEFEA; /* terracotta-tinted very light */ --c-paper: #FAF7F0; --c-card: #FAF7F0; --c-card-strong: #EFE7D5; --c-bg: #F5F0E6; /* text */ --c-text: #3D362F; --c-text-strong: #2A2520; --c-text-muted: #8A7F70; --c-text-on-brand: #FAF7F0; --c-secondary: #5C544A; --c-muted: #8A7F70; --c-disabled: #B5AD9F; --c-title: #2A2520; --c-primary: #3D362F; --c-white: #FAF7F0; /* v1 alias 同 surface */ /* line */ --c-line: #C4B89F; /* cream-tinted hairline */ --c-line-1: #C4B89F; --c-line-2: #D8CFB8; --c-divider: #C4B89F; /* brand · terracotta */ --c-brand: #C96442; --c-brand-80: #B5532E; --c-brand-60: #B5532E; --c-brand-40: #D97757; --c-brand-10: #FAEFEA; --c-blue: #C96442; /* v1 alias 跟 brand */ --c-blue-60: #B5532E; --c-blue-40: #D97757; --c-blue-10: #FAEFEA; --c-blue-line: var(--c-brand-line-40); --c-blue-ghost: var(--c-brand-tint-04); /* rose · 编辑色调下提暖 */ --c-rose: #B23A4F; --c-rose-60: #93304A; --c-rose-40: #D45773; --c-rose-10: #F8E8EB; --c-rose-line: var(--c-rose-line-40); /* semantic · 编辑色调下偏暖 */ --c-success: #6B7F4A; --c-danger: #B23A4F; --c-warning: #C29033; --c-success-10: #EFF1E5; --c-danger-10: #F8E8EB; /* shadow · 编辑感弱化 · 暖色 base (warm-black 42,37,32) · 跟 parchment 协调 */ /* Kraft · heritage 暖 sepia · 8/12/16 (per THEME_BRIEFS ladder bump) */ --shadow-xs: 0 1px 2px rgba(42,37,32,0.08); --shadow-sm: 0 1px 3px rgba(42,37,32,0.12), 0 1px 1px rgba(42,37,32,0.08); --shadow-md: 0 2px 4px rgba(42,37,32,0.16), 0 6px 14px rgba(42,37,32,0.10); --shadow-lg: 0 2px 6px rgba(42,37,32,0.10), 0 8px 24px rgba(42,37,32,0.08); --shadow-brand: 0 1px 3px rgba(42,37,32,0.08), 0 8px 20px rgba(201,100,66,0.16); --shadow-rose: 0 1px 3px rgba(42,37,32,0.08), 0 8px 20px rgba(178,58,79,0.12); --shadow-elevated: 0 30px 80px rgba(42,37,32,0.18); /* ring · 跟 brand/line 自动 swap (无须显式) */ --ring-line: 0 0 0 2px var(--c-line); --ring-brand: 0 0 0 2px var(--c-brand); --ring-rose: 0 0 0 2px var(--c-rose); --ring-strong: 0 0 0 2px var(--c-title); --ring-inset-brand: 0 0 0 2px var(--c-brand) inset; /* hover · kraft 暖色 base shadow */ --hover-shadow: var(--shadow-md); /* hover · 暖色 layered shadow */ --card-shadow: var(--shadow-sm); /* kraft 默认有 base contact (paper 但商务) */ --card-shadow-hover: var(--shadow-md); /* hover 升一档 */ /* overlay re-declare · text-strong 改 #2A2520 (暖深棕) · :root overlay 用 gray-900 不跟 swap · 重算让暖棕 propagate */ --c-overlay-02: color-mix(in srgb, var(--c-text-strong) 2%, transparent); --c-overlay-04: color-mix(in srgb, var(--c-text-strong) 4%, transparent); --c-overlay-08: color-mix(in srgb, var(--c-text-strong) 8%, transparent); --c-overlay-12: color-mix(in srgb, var(--c-text-strong) 12%, transparent); --c-overlay-16: color-mix(in srgb, var(--c-text-strong) 16%, transparent); --c-overlay-60: color-mix(in srgb, var(--c-text-strong) 60%, transparent); /* status tint re-declare · color-mix 在 kraft scope 重算 (rose/success/danger/warning 全改) */ --c-rose-tint-08: color-mix(in srgb, var(--c-rose) 8%, transparent); --c-rose-line-40: color-mix(in srgb, var(--c-rose) 40%, transparent); --c-success-tint-08: color-mix(in srgb, var(--c-success) 8%, transparent); --c-success-tint-10: color-mix(in srgb, var(--c-success) 10%, transparent); --c-success-tint-12: color-mix(in srgb, var(--c-success) 12%, transparent); --c-success-line-50: color-mix(in srgb, var(--c-success) 50%, transparent); --c-danger-tint-08: color-mix(in srgb, var(--c-danger) 8%, transparent); --c-danger-tint-10: color-mix(in srgb, var(--c-danger) 10%, transparent); --c-danger-tint-12: color-mix(in srgb, var(--c-danger) 12%, transparent); --c-danger-line-50: color-mix(in srgb, var(--c-danger) 50%, transparent); --c-warn-tint-10: color-mix(in srgb, var(--c-warning) 10%, transparent); --c-warn-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); --c-warning-tint-08: color-mix(in srgb, var(--c-warning) 8%, transparent); --c-warning-tint-12: color-mix(in srgb, var(--c-warning) 12%, transparent); --c-warning-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); /* ★ brand-tint / brand-line re-declare 在 kraft pack scope · 2026-05-11 fix (same as dark pack) :root 声明的 color-mix tints declaration-scope 解析 → 卡在 :root catlaxy 蓝 kraft 仅 override --c-brand, 不重声明 tint/line → 12 family / 5-2 / 8-3 brand-tint elements 不跟 terracotta swap fix: 重声明所有 brand-derived tokens, color-mix 在 kraft scope 重算 → 跟 terracotta swap */ --c-brand-tint-04: color-mix(in srgb, var(--c-brand) 4%, transparent); --c-brand-tint-08: color-mix(in srgb, var(--c-brand) 8%, transparent); --c-brand-tint-10: color-mix(in srgb, var(--c-brand) 10%, transparent); --c-brand-tint-12: color-mix(in srgb, var(--c-brand) 12%, transparent); --c-brand-tint-16: color-mix(in srgb, var(--c-brand) 16%, transparent); --c-brand-line-30: color-mix(in srgb, var(--c-brand) 30%, transparent); --c-brand-line-40: color-mix(in srgb, var(--c-brand) 40%, transparent); --c-brand-line-50: color-mix(in srgb, var(--c-brand) 50%, transparent); /* ★ chart tokens re-declare 同 dark pack pattern · 修 ECharts 不跟 kraft 切色 bug · 2026-05-11 */ --chart-1: var(--c-brand); --chart-2: var(--c-brand-60); --chart-3: var(--c-brand-40); --chart-4: color-mix(in srgb, var(--c-brand) 30%, transparent); --chart-5: color-mix(in srgb, var(--c-brand) 15%, transparent); --chart-axis: var(--c-line); --chart-label: var(--c-text-muted); --chart-emphasis: var(--c-text-strong); --chart-negative: var(--c-rose); /* ★ Kraft · Tier 3 COMMITMENT · 杂志 editorial paper-grain (per THEME_BRIEFS · Tufte / 三联 / Bauhaus print) 轻 radius + 1px warm border + 暖 sepia 水平 shadow + press-down hover + heavy weight 哲学: print substrate · 跟 parchment 协调 · 暖 sepia 不冷 modern */ --card-radius: var(--r-sm); /* 4px · subtle 印刷 edge (不锐如帝皇 / 不圆如 coral) */ --card-border-width-default: 1px; /* 1px hairline · 暖 cream-tinted line 提供 paper edge */ --card-shadow: 0 1px 6px rgba(42,37,32,0.10); /* 水平 sepia press · 暖深 base · paper sit-on-table */ --card-shadow-hover: 0 2px 10px rgba(42,37,32,0.14); /* hover · 略升 · 不飘 (editorial 不张扬) */ --hover-transform: translateY(-1px); /* 微 lift · 跟 catlaxy 同语 · paper 不弹跳 */ --type-display-weight: 900; /* heavy · Bauhaus print authority */ /* ★ Phase 5 · Kraft commitment · paper-grain editorial · The New Yorker / Tufte / 三联 vocabulary */ --bg-pattern: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* paper texture noise · pattern IS the design (canonical Kraft) */ --anchor-font-family: var(--f-serif); /* Playfair · editorial 印刷 serif */ --anchor-weight: 900; --anchor-decoration: none; --anchor-letter-spacing: var(--ls-tighter); --em-color: var(--c-brand); --em-weight: 700; --em-style: italic; /* editorial slant · 杂志 style */ --em-decoration: none; --type-display-tracking: 0; /* normal · editorial / Bauhaus 不挤压 */ --card-padding: 36px; /* editorial standard · paper substrate */ } /* ════════════════════════════════════════════════════════════════════════ ★ KLEIN THEME · IKB 标准蓝 (2026-05-11 · 跟 catlaxy-clean 重命名整合) ──────────────────────────────────────────────────────────────────────── 语义: International Klein Blue (#002FA7) · Yves Klein 1956 patented ultramarine standard family · 无 logo · 客户 deck 可用 (区别 Catlaxy vendor brand) /* ════════════════════════════════════════════════════════════════════════ ★ STANDARD THEMES · 2026-05-11 batch add (9 themes) ──────────────────────────────────────────────────────────────────────── 每 theme 用 famous color · 共享同 Light surface (canvas/text/line) · 只换 --c-brand brand 衍生用 color-mix(--c-brand, black/white) · 4 阶 step 自动算 brand-tint/-line/-chart · color-mix 在 scope 重算 · auto follow brand swap ──────────────────────────────────────────────────────────────────────── contrast logic: - 暗 brand (Klein/Racing/Peri/ChinaRed/YInMn): white text-on-brand 默认 OK - 浅 brand (Tiffany/Hermès/Imperial/Coral): 需 override text-on-brand = gray-900 ──────────────────────────────────────────────────────────────────────── */ /* ════════════════════════════════════════════════════════════════════════ ★ Theme · Onyx (黑曜石 · dark mode standard family · 2026-05-11 NEW) ──────────────────────────────────────────────────────────────────────── 单独 theme · 不是 mode toggle (跟之前 dark pack 区分) 完整 dark token override · brand 用提亮蓝 (#6BB7FF) for readability on dark canvas ──────────────────────────────────────────────────────────────────────── */ .ds-slide[data-pack="onyx"], .ds-slide.onyx, [data-pack="onyx"] { /* surface · dark */ --c-canvas: #0F1623; --c-surface: #1A2233; --c-surface-tint: var(--c-brand-tint-08); --c-paper: #0F1623; --c-card: #1A2233; --c-card-strong: #2A3344; --c-bg: #0F1623; /* text · light */ --c-text: #E6E9F0; --c-text-strong: #FFFFFF; --c-text-muted: #8C9AAF; --c-text-on-brand: #FFFFFF; --c-secondary: #B8C0CD; --c-muted: #8C9AAF; --c-disabled: #6F7E97; --c-title: #FFFFFF; --c-primary: #E6E9F0; --c-white: #FFFFFF; /* line */ --c-line: #2A3344; --c-line-1: #2A3344; --c-line-2: #1A2233; --c-divider: #2A3344; /* brand · 深 canvas 用提亮蓝 · 不用 #002FA7 Klein (会沉到 BG 里) */ --c-brand: #6BB7FF; --c-brand-80: #4DA6FF; --c-brand-60: #4DA6FF; --c-brand-40: #80D4FF; --c-brand-10: color-mix(in srgb, var(--c-brand) 12%, transparent); --c-blue: var(--c-brand); /* rose · 提亮 (dark 上) */ --c-rose: #FF5A89; --c-rose-60: #E8175D; --c-rose-40: #FF5A89; /* semantic · 提亮 */ --c-success: #34D399; --c-danger: #F87171; --c-warning: #FBBF24; /* shadow · dark base 更深 */ --shadow-xs: 0 1px 2px rgba(0,0,0,0.20); --shadow-sm: 0 1px 2px rgba(0,0,0,0.24), 0 1px 1px rgba(0,0,0,0.20); --shadow-md: 0 2px 4px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.20); --shadow-lg: 0 4px 8px rgba(0,0,0,0.36), 0 12px 32px rgba(0,0,0,0.24); --shadow-brand: 0 2px 4px rgba(0,0,0,0.28), 0 8px 24px rgba(107,183,255,0.20); --shadow-rose: 0 2px 4px rgba(0,0,0,0.28), 0 8px 24px rgba(255,90,137,0.20); --shadow-elevated: 0 30px 80px rgba(0,0,0,0.50); /* overlay re-declare · text-strong 改 #FFFFFF (dark theme) · 用白 overlay 跟 dark BG 协调 */ --c-overlay-02: color-mix(in srgb, var(--c-text-strong) 2%, transparent); --c-overlay-04: color-mix(in srgb, var(--c-text-strong) 4%, transparent); --c-overlay-08: color-mix(in srgb, var(--c-text-strong) 8%, transparent); --c-overlay-12: color-mix(in srgb, var(--c-text-strong) 12%, transparent); --c-overlay-16: color-mix(in srgb, var(--c-text-strong) 16%, transparent); --c-overlay-60: color-mix(in srgb, var(--c-text-strong) 60%, transparent); /* status tint re-declare · color-mix 在 onyx scope 重算 (rose/success/danger/warning 全改) */ --c-rose-tint-08: color-mix(in srgb, var(--c-rose) 8%, transparent); --c-rose-line-40: color-mix(in srgb, var(--c-rose) 40%, transparent); --c-success-tint-08: color-mix(in srgb, var(--c-success) 8%, transparent); --c-success-tint-10: color-mix(in srgb, var(--c-success) 10%, transparent); --c-success-tint-12: color-mix(in srgb, var(--c-success) 12%, transparent); --c-success-line-50: color-mix(in srgb, var(--c-success) 50%, transparent); --c-danger-tint-08: color-mix(in srgb, var(--c-danger) 8%, transparent); --c-danger-tint-10: color-mix(in srgb, var(--c-danger) 10%, transparent); --c-danger-tint-12: color-mix(in srgb, var(--c-danger) 12%, transparent); --c-danger-line-50: color-mix(in srgb, var(--c-danger) 50%, transparent); --c-warn-tint-10: color-mix(in srgb, var(--c-warning) 10%, transparent); --c-warn-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); --c-warning-tint-08: color-mix(in srgb, var(--c-warning) 8%, transparent); --c-warning-tint-12: color-mix(in srgb, var(--c-warning) 12%, transparent); --c-warning-line-50: color-mix(in srgb, var(--c-warning) 50%, transparent); /* brand-tint / brand-line re-declare */ --c-brand-tint-04: color-mix(in srgb, var(--c-brand) 4%, transparent); --c-brand-tint-08: color-mix(in srgb, var(--c-brand) 8%, transparent); --c-brand-tint-10: color-mix(in srgb, var(--c-brand) 10%, transparent); --c-brand-tint-12: color-mix(in srgb, var(--c-brand) 12%, transparent); --c-brand-tint-16: color-mix(in srgb, var(--c-brand) 16%, transparent); --c-brand-line-30: color-mix(in srgb, var(--c-brand) 30%, transparent); --c-brand-line-40: color-mix(in srgb, var(--c-brand) 40%, transparent); --c-brand-line-50: color-mix(in srgb, var(--c-brand) 50%, transparent); /* chart re-declare */ --chart-1: var(--c-brand); --chart-2: var(--c-brand-60); --chart-3: var(--c-brand-40); --chart-4: color-mix(in srgb, var(--c-brand) 30%, transparent); --chart-5: color-mix(in srgb, var(--c-brand) 15%, transparent); --chart-axis: var(--c-line); --chart-label: var(--c-text-muted); --chart-emphasis: var(--c-text-strong); --chart-negative: var(--c-rose); /* ★ Onyx · Tier 3 COMMITMENT · dark glow + inset highlight (per THEME_BRIEFS · 黑曜石 · Apple/Tesla/Linear dark) refined radius + 1px overlay border + heavy dark drop + inset white highlight + glow-up hover + 700 modern 哲学: 黑曜石 obsidian · volcanic glass · dark canvas 需 heavy shadow + 提亮 inset 让 card 浮起 (Strategy D) */ --card-radius: var(--r-sm); /* 4px refined · 跟 Apple/Linear dark UI 同语 */ --card-border-width-default: 1px; /* 1px overlay border · 用 --c-line (#2A3344) 已 swap · subtle definition */ --card-shadow: 0 2px 6px rgba(0,0,0,0.30), 0 8px 20px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.05); /* heavy dark drop + 极 subtle white inset highlight · 让 card 在 dark canvas 上浮起 */ --card-shadow-hover: 0 4px 12px rgba(0,0,0,0.35), 0 12px 28px rgba(0,0,0,0.30), inset 0 1px 0 rgba(255,255,255,0.08); /* hover · glow up · inset 亮一档 */ --hover-transform: translateY(-2px); /* glow up · futuristic motion */ --type-display-weight: 700; /* 700 modern · monastic minimalist · 不 heavy bold */ /* ★ Phase 5 · Onyx commitment · 黑曜石 · Apple/Tesla/Linear dark · futuristic minimalist */ --bg-pattern: radial-gradient(ellipse at 50% 0%, rgba(107,183,255,0.06), transparent 60%); /* 顶部 dark glow · 提亮蓝 hue radial · 跟 brand 同 family · futuristic 顶光 */ --anchor-font-family: var(--f-en); --anchor-weight: 700; /* 700 modern · monastic · 不 heavy bold · 跟 Apple dark UI 同语 */ --anchor-decoration: none; --anchor-letter-spacing: var(--ls-tighter); --em-color: var(--c-brand); --em-weight: 700; --em-style: normal; --em-decoration: none; --em-text-shadow: 0 0 12px color-mix(in srgb, var(--c-brand) 50%, transparent); /* glow · dark theme 提亮蓝光晕 · futuristic obsidian signature */ --type-display-tracking: var(--ls-tighter); /* tight modern · 跟 Linear/Apple dark 同语 */ --card-padding: 36px; /* standard · minimalist 不张扬 */ }