/* ============================================================================ 声落 SOUNDFALL · Design Tokens v1.0 设计系统：SOUNDFALL Light（Supabase 基底 × Linear 排版 × Vercel 边框） 来源：.workbuddy/artifacts/02-design-tokens.md §8 —— 原样复制，未改动任何色值 品牌主色 #35C9B5 取自 App AppTheme.ets「墨青 ink-teal」主题 所有对比度数值经实测校验，标注 ✅ 的组合满足 WCAG 2.1 AA ============================================================================ */ :root { /* ========================================================================== 1. 青绿色阶 TEAL RAMP —— 色相锁定 oklch H = 181.6 双轨制：500 做「面」，700 做「字」，600 做「线和图标」 ========================================================================== */ --sf-teal-50: #EBFDF9; /* 1.05 : 白 — 淡底，永不承载文字 */ --sf-teal-100: #D0FBF2; /* 1.12 : 白 — 光晕/轨道 */ --sf-teal-200: #A4F3E5; /* 1.27 : 白 — 装饰边框 */ --sf-teal-300: #73E7D4; /* 1.49 : 白 — 装饰图形 / 暗底次级文字 */ --sf-teal-400: #4ADCC7; /* 11.14: 暗底 — 主按钮 hover 底 / 暗底强调 */ --sf-teal-500: #35C9B5; /* ★品牌色 = App primary。白底 2.06 ❌ 禁用于文字 */ --sf-teal-600: #029B8A; /* 3.47 ✅ 白 — 图标/大字/边界（≥3:1） */ --sf-teal-700: #057D6F; /* 5.04 ✅ 白 — ★正文链接/小字（≥4.5:1） */ --sf-teal-800: #00675C; /* 6.79 ✅ 白 — 链接 hover / chip 文字 */ --sf-teal-900: #004F46; /* 9.52 ✅ 白 — 青绿系标题（AAA） */ --sf-teal-950: #002F29; /* 14.60✅ 白 — 极深墨青 */ /* 品牌色 alpha 变体（对应 App primarySoft = 12%） */ --sf-teal-a08: rgba(53, 201, 181, .08); --sf-teal-a12: rgba(53, 201, 181, .12); --sf-teal-a20: rgba(53, 201, 181, .20); --sf-teal-a32: rgba(53, 201, 181, .32); /* 主色实心面上的文字（App primaryTxt） */ --sf-ink-on-teal: #062E28; /* 7.12 ✅ on teal-500 / 8.64 ✅ on teal-400 */ --sf-ink-on-teal-deep: #04211D; /* 4.88 ✅ on teal-600（按压态用） */ /* ========================================================================== 2. 中性灰阶 NEUTRAL —— 冷调（色相 210），与青绿同色域 ========================================================================== */ --sf-gray-0: #FFFFFF; /* 页面主背景 */ --sf-gray-25: #F9FCFC; /* 极淡区块底 */ --sf-gray-50: #F4F8F9; /* 标准次级区块底 / 输入框底 */ --sf-gray-100: #ECF2F3; /* hover 底 / 禁用填充 */ --sf-gray-200: #DFE6E7; /* ★默认边框 */ --sf-gray-300: #CED6D7; /* 强调边框 / 时间线竖线 */ --sf-gray-400: #A8B2B3; /* 2.17 — 禁用文字 / 装饰图形 */ --sf-gray-500: #848E90; /* 3.36 — placeholder / 弱元数据 */ --sf-gray-600: #636E70; /* 5.26 ✅ 次级文字 */ --sf-gray-700: #475254; /* 8.07 ✅ ★正文默认 */ --sf-gray-800: #2E393B; /* 11.90✅ 强调正文 */ --sf-gray-900: #192224; /* 16.21✅ ★标题默认 */ --sf-gray-950: #0A1214; /* 18.93✅ 最高强调 / 遮罩基色 */ /* ========================================================================== 3. 语义色 SEMANTIC（base = App 原值，strong = 白底可读变体 ≥4.7:1） 仅用于状态语义，出现频率 <5%，禁止进入品牌装饰层 ========================================================================== */ --sf-success: #5FD68E; --sf-success-strong: #008046; /* 5.03 ✅ */ --sf-success-bg: #DEFEE7; --sf-success-border: #B6ECC6; --sf-warning: #F0A05A; --sf-warning-strong: #A75C02; /* 5.03 ✅ */ --sf-warning-bg: #FFF2E8; --sf-warning-border: #FDD3B2; --sf-danger: #F26D6D; --sf-danger-strong: #BC484A; /* 5.04 ✅ */ --sf-danger-bg: #FFF1F0; --sf-danger-border: #FFCFCC; --sf-info: #3D9BFF; --sf-info-strong: #1E70C4; /* 5.04 ✅ */ --sf-info-bg: #EDF5FF; --sf-info-border: #C5DFFF; /* ========================================================================== 4. 深色展台 DARK PLATE —— 逐个对应 AppTheme.ets「墨青」，与截图无缝 ========================================================================== */ --sf-plate-bg: #0E1114; /* App bgPanel = 截图底色，无缝融合 */ --sf-plate-raised: #151A1E; /* App bgRaised */ --sf-plate-sunken: #0A0D10; /* App bgInput */ --sf-plate-line: #21282E; /* App line */ --sf-plate-line-strong: #2E363D; /* App lineStrong */ --sf-plate-text: #E7EAED; /* App txt — 15.68:1 ✅ */ --sf-plate-text-dim: #96A0A8; /* App txtDim — 7.12:1 ✅ */ --sf-plate-text-faint: #59636B; /* App txtFaint — 装饰用 */ --sf-plate-accent: #35C9B5; /* 9.17:1 ✅ on plate */ --sf-plate-accent-hi: #4ADCC7; /* 11.14:1 ✅ on plate */ --sf-shell: #1F2425; /* 手机 mockup 外壳 */ --sf-shell-edge: rgba(255, 255, 255, .10); --sf-shell-hi: rgba(255, 255, 255, .18); /* ========================================================================== 5. 语义别名层 —— 组件 CSS 只允许消费这一层，不要直接引用上面的色阶 ========================================================================== */ /* 表面 */ --sf-bg: var(--sf-gray-0); --sf-bg-subtle: var(--sf-gray-25); --sf-bg-muted: var(--sf-gray-50); --sf-bg-hover: var(--sf-gray-100); --sf-bg-accent: var(--sf-teal-50); --sf-bg-accent-2: var(--sf-teal-100); --sf-bg-plate: var(--sf-plate-bg); /* 文字 */ --sf-fg: var(--sf-gray-900); --sf-fg-body: var(--sf-gray-700); --sf-fg-secondary: var(--sf-gray-600); --sf-fg-muted: var(--sf-gray-500); --sf-fg-disabled: var(--sf-gray-400); --sf-fg-accent: var(--sf-teal-700); /* ★所有青绿文字走这里 */ --sf-fg-accent-hi: var(--sf-teal-800); --sf-fg-on-primary: var(--sf-ink-on-teal); /* 边框 */ --sf-border: var(--sf-gray-200); --sf-border-strong: var(--sf-gray-300); --sf-border-accent: var(--sf-teal-600); /* ≥3:1，可被感知 */ --sf-border-soft: var(--sf-teal-200); /* 装饰性，不承担边界语义 */ /* 遮罩 */ --sf-overlay: rgba(10, 18, 20, .72); --sf-overlay-blur: saturate(140%) blur(8px); /* ========================================================================== 6. 允许使用的渐变 —— 全站只有这三条，不得新增 ========================================================================== */ --sf-grad-hero: radial-gradient(120% 78% at 50% -12%, #D0FBF2 0%, #EBFBF8 34%, #F9FCFC 62%, #FFFFFF 88%); --sf-grad-rule: linear-gradient(90deg, transparent 0%, #A4F3E5 35%, #A4F3E5 65%, transparent 100%); --sf-grad-plate: linear-gradient(180deg, #151A1E 0%, #0E1114 52%, #0B0E11 100%); /* ========================================================================== 7. 排版 TYPOGRAPHY ========================================================================== */ --sf-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Inter, Roboto, "HarmonyOS Sans SC", "HarmonyOS Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", "Noto Sans CJK SC", "WenQuanYi Micro Hei", sans-serif; --sf-font-display: "HarmonyOS Sans SC", "HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", "Source Han Sans SC", sans-serif; --sf-font-mono: ui-monospace, SFMono-Regular, "SF Mono", "JetBrains Mono", "Cascadia Mono", Consolas, Menlo, "Liberation Mono", "Microsoft YaHei UI", monospace; /* 展示级（品牌名与标语专用） */ --sf-text-wordmark: clamp(2.75rem, 6.2vw, 4.75rem); /* 44 → 76px 「声落」 */ --sf-text-wordmark-en: clamp(0.875rem, 1.3vw, 1.125rem); /* 14 → 18px SOUNDFALL */ --sf-text-tagline: clamp(1.375rem, 2.6vw, 2.125rem); /* 22 → 34px 核心标语 */ /* 标题层级 */ --sf-text-display: clamp(2rem, 4.2vw, 3rem); /* 32 → 48px */ --sf-text-h1: clamp(1.75rem, 3.4vw, 2.5rem); /* 28 → 40px */ --sf-text-h2: clamp(1.5rem, 2.6vw, 2rem); /* 24 → 32px */ --sf-text-h3: clamp(1.1875rem, 1.6vw, 1.375rem); /* 19 → 22px */ --sf-text-h4: 1.0625rem; /* 17px */ /* 正文层级 */ --sf-text-lead: clamp(1.0625rem, 1.4vw, 1.1875rem); /* 17 → 19px */ --sf-text-body: 1rem; /* 16px */ --sf-text-sm: 0.875rem; /* 14px */ --sf-text-xs: 0.8125rem; /* 13px */ --sf-text-label: 0.75rem; /* 12px */ --sf-text-mono-sm: 0.8125rem; /* 13px */ /* 行高（中文正文必须 ≥1.75） */ --sf-lh-none: 1; --sf-lh-tight: 1.15; --sf-lh-snug: 1.3; --sf-lh-h3: 1.45; --sf-lh-body: 1.78; /* ★中文正文 */ --sf-lh-lead: 1.8; --sf-lh-sm: 1.7; /* 字重（只用这四档） */ --sf-fw-normal: 400; --sf-fw-medium: 500; --sf-fw-semibold: 600; --sf-fw-bold: 700; /* 字距（中文一律 0，负字距仅拉丁） */ --sf-ls-tight: -0.02em; /* 仅用于纯拉丁大标题 */ --sf-ls-normal: 0; --sf-ls-wide: 0.06em; /* 全大写小标签 */ --sf-ls-wordmark: 0.24em; /* SOUNDFALL 字标 */ /* 阅读宽度 */ --sf-measure-cjk: 36em; --sf-measure-lat: 68ch; /* ========================================================================== 8. 间距 SPACING（4pt 基准） ========================================================================== */ --sf-space-0: 0; --sf-space-1: 4px; --sf-space-2: 8px; --sf-space-3: 12px; --sf-space-4: 16px; --sf-space-5: 20px; --sf-space-6: 24px; --sf-space-8: 32px; --sf-space-10: 40px; --sf-space-12: 48px; --sf-space-16: 64px; --sf-space-20: 80px; --sf-space-24: 96px; --sf-space-32: 128px; --sf-space-40: 160px; --sf-section-y: clamp(4rem, 8vw, 8rem); --sf-section-y-sm: clamp(3rem, 5vw, 4.5rem); --sf-section-gap: clamp(2rem, 4vw, 3.5rem); /* ========================================================================== 9. 容器与栅格 LAYOUT ========================================================================== */ --sf-container: 1200px; --sf-container-wide: 1360px; --sf-container-narrow: 880px; --sf-container-prose: 680px; --sf-page-pad: clamp(20px, 5vw, 40px); --sf-gutter: 24px; --sf-nav-h: 64px; --sf-nav-h-scrolled: 56px; /* 断点（供 JS 读取；CSS 媒体查询需写字面量） */ --sf-bp-xs: 480px; --sf-bp-sm: 768px; --sf-bp-md: 1024px; --sf-bp-lg: 1280px; --sf-bp-xl: 1440px; /* ========================================================================== 10. 圆角 RADIUS ========================================================================== */ --sf-radius-xs: 4px; --sf-radius-sm: 6px; /* 技术参数 chip */ --sf-radius-md: 8px; /* 输入框 / 小按钮 / 截图窗口 */ --sf-radius-lg: 10px; /* ★标准按钮 */ --sf-radius-xl: 14px; /* ★标准卡片 */ --sf-radius-2xl: 20px; /* 大卡片 / 里程碑卡 */ --sf-radius-3xl: 28px; /* 深色展台 */ --sf-radius-phone: 40px; /* 手机外壳 */ --sf-radius-screen: 32px; /* 手机内屏 */ --sf-radius-full: 999px; /* ========================================================================== 11. 阴影 ELEVATION（墨青调 rgba(6,46,40,x)，非纯黑） ========================================================================== */ --sf-shadow-none: none; --sf-shadow-xs: 0 1px 2px rgba(6, 46, 40, .05); --sf-shadow-sm: 0 1px 2px rgba(6, 46, 40, .05), 0 2px 6px -2px rgba(6, 46, 40, .06); --sf-shadow-md: 0 2px 4px rgba(6, 46, 40, .04), 0 8px 20px -8px rgba(6, 46, 40, .12); --sf-shadow-lg: 0 4px 8px rgba(6, 46, 40, .05), 0 18px 36px -14px rgba(6, 46, 40, .16); --sf-shadow-xl: 0 8px 20px -10px rgba(6, 46, 40, .18), 0 32px 64px -24px rgba(6, 46, 40, .28); --sf-shadow-plate:0 2px 6px rgba(6, 46, 40, .08), 0 28px 64px -24px rgba(6, 46, 40, .35); --sf-shadow-phone:0 4px 12px -4px rgba(6, 46, 40, .30), 0 40px 80px -32px rgba(6, 46, 40, .45); --sf-glow-teal: 0 8px 28px -10px rgba(53, 201, 181, .45); --sf-ring-focus: 0 0 0 3px rgba(53, 201, 181, .32), 0 0 0 1px #029B8A; --sf-hairline-inner: inset 0 0 0 1px rgba(255, 255, 255, .65); --sf-hairline-dark: inset 0 0 0 1px rgba(255, 255, 255, .07); /* ========================================================================== 12. 动效 MOTION ========================================================================== */ --sf-dur-instant: 80ms; --sf-dur-fast: 140ms; --sf-dur-base: 220ms; --sf-dur-slow: 340ms; --sf-dur-slower: 560ms; --sf-dur-pulse: 2400ms; --sf-ease-out: cubic-bezier(.16, 1, .3, 1); --sf-ease-standard: cubic-bezier(.2, 0, 0, 1); --sf-ease-in-out: cubic-bezier(.65, 0, .35, 1); --sf-ease-spring: cubic-bezier(.34, 1.4, .64, 1); /* ========================================================================== 13. 层级 Z-INDEX ========================================================================== */ --sf-z-base: 0; --sf-z-raised: 10; --sf-z-sticky: 100; --sf-z-nav: 200; --sf-z-dropdown: 300; --sf-z-backdrop: 800; --sf-z-modal: 810; --sf-z-toast: 900; /* ========================================================================== 14. 图标（Feather 线性描边规范） ========================================================================== */ --sf-icon-xs: 16px; --sf-icon-sm: 20px; --sf-icon-md: 24px; /* 默认 */ --sf-icon-lg: 32px; --sf-icon-xl: 40px; /* 卖点卡主图标 */ --sf-icon-stroke: 1.75; /* 24px viewBox 下的描边宽度，与 App 一致 */ --sf-icon-stroke-lg: 1.5; /* ≥32px 时改用更细描边，避免笨重 */ }