/* ============================================================ AuraPal Design Tokens v2 — Apple HIG Aligned 治愈品牌 × Apple 人机交互指南 设计哲学: - 内容优先（Deference）: UI 退让，让内容发声 - 清晰可读（Clarity）: 精确排版，有意义的留白 - 层次纵深（Depth）: 微妙的层叠、毛玻璃、空间感 - 系统一致（Consistency）: 8pt 网格、语义色彩、统一动效 ============================================================ */ :root, [data-theme='light'] { /* ── Surfaces ──────────────────────────────────────────── Apple 层级: systemBackground → secondary → tertiary 保留暖底，但更 Apple 化的阶梯对比 */ --color-bg: #faf6f0; /* 主背景 · 奶白暖底 */ --color-surface: #fdfaf4; /* 卡片/面板一级底 */ --color-surface-2: #f8f2e8; /* 卡片/面板二级底 */ --color-surface-offset:#ede5d3; /* 偏移底 · 分区衬底 */ --color-surface-offset-2:#e2d8c2; /* 偏移底二级 · 更深 */ --color-divider: #ddd2be; /* 分割线 */ --color-border: #cfc1a8; /* 边框 · 输入框/按钮外框 */ /* ── Text — Apple label 层级 ───────────────────────────── Apple HIG: label → secondaryLabel → tertiaryLabel 暖墨体系，严格对比度 ≥ 4.5:1 */ --color-text: #1d1b16; /* label · 主文字 高对比 */ --color-text-muted: #6e6354; /* secondaryLabel · 辅文字 */ --color-text-faint: #a69a88; /* tertiaryLabel · 占位/提示 */ --color-text-inverse: #fdfaf4; /* 反色文字 · 深底白字 */ /* ── Primary — 晨曦粉 ──────────────────────────────────── Apple tint 语义：主要行动、强调、交互状态 */ --color-primary: #e89890; --color-primary-hover: #d87c74; /* hover · 更饱和 */ --color-primary-active: #b75e57; /* active/pressed · 深锚 */ --color-primary-highlight: #f9e1de; /* 选中高亮底 */ --color-primary-soft: #fceeed; /* 浅底 · badge/标签 */ /* ── Secondary — 薄荷绿 ────────────────────────────────── Apple secondarySystemColor 语义：辅助、确认、健康 */ --color-mint: #9dbfaa; --color-mint-hover: #7ea58c; --color-mint-soft: #e3eee7; /* ── Accent — 米金 ──────────────────────────────────────── Apple accent 语义：高端、品质、IP 标识 */ --color-gold: #d6a44a; --color-gold-hover: #b88533; --color-gold-soft: #f3e7cc; /* ── Violet — 仅 AEE 技术区 ─────────────────────────────── */ --color-violet: #b29bd8; --color-violet-soft: #ebe3f5; /* ── Radius — Apple HIG 圆角体系 ────────────────────────── Apple 风格：更克制、更一致的圆角 iOS: 8/12/16/22 continuous */ --radius-sm: 8px; /* 0.5rem · 小元素/输入框 */ --radius-md: 12px; /* 0.75rem · 卡片内/标签 */ --radius-lg: 16px; /* 1rem · 卡片/面板 */ --radius-xl: 24px; /* 1.5rem · 大面板/hero */ --radius-2xl: 32px; /* 2rem · 超大容器 */ --radius-full: 9999px; /* 药丸/全圆 */ /* ── Shadows — Apple 分层纵深 ───────────────────────────── 极简阴影：Apple 用极轻的阴影 + 毛玻璃表达深度 数值更小、更透明、更 Apple */ --shadow-sm: 0 1px 2px 0 rgba(30, 20, 10, 0.05); --shadow-md: 0 2px 8px 0 rgba(30, 20, 10, 0.08), 0 0 1px 0 rgba(30, 20, 10, 0.04); --shadow-lg: 0 8px 24px 0 rgba(30, 20, 10, 0.10), 0 0 1px 0 rgba(30, 20, 10, 0.04); --shadow-xl: 0 16px 48px -4px rgba(30, 20, 10, 0.14); --shadow-glow: 0 8px 32px -4px rgba(232, 152, 144, 0.20), 0 0 1px 0 rgba(232, 152, 144, 0.10); --shadow-float: 0 24px 64px -8px rgba(30, 20, 10, 0.18); /* ── Transitions — Apple HIG 动效 ────────────────────────── Apple 标准: 0.2-0.35s ease-out Spring 曲线用于弹跳反馈 所有交互必须尊重 prefers-reduced-motion */ --transition-fast: 150ms cubic-bezier(0.25, 0.1, 0.25, 1); --transition-interactive:250ms cubic-bezier(0.25, 0.1, 0.25, 1); --transition-slow: 400ms cubic-bezier(0.25, 0.1, 0.25, 1); --transition-spring: 350ms cubic-bezier(0.34, 1.56, 0.64, 1); --transition-enter: 300ms cubic-bezier(0.0, 0.0, 0.2, 1); --transition-exit: 200ms cubic-bezier(0.4, 0.0, 1, 1); /* ── Type scale — Apple 排版阶梯 ─────────────────────────── 参考 apple.com 产品页: Hero 大字 + 精确 body 17px Fluid clamp 确保各断点优雅缩放 步进比 ≈ 1.25 (Major Third) */ --text-xs: clamp(12px, 0.7rem + 0.25vw, 13px); /* caption · 小标注 */ --text-sm: clamp(14px, 0.82rem + 0.3vw, 15px); /* subhead · 辅文本 */ --text-base: clamp(17px, 0.95rem + 0.35vw, 18px); /* body · Apple 标准正文 */ --text-lg: clamp(21px, 1.05rem + 0.5vw, 24px); /* title3 · 副标题 */ --text-xl: clamp(28px, 1.2rem + 1vw, 34px); /* title1 · 区块标题 */ --text-2xl: clamp(40px, 1.5rem + 2.5vw, 52px); /* 大标题 · Apple 产品页 */ --text-3xl: clamp(56px, 1.8rem + 4vw, 72px); /* hero · 首屏核心 */ --text-hero: clamp(64px, 2rem + 5vw, 88px); /* super hero · 全宽宣言 */ /* ── Line heights — Apple 精确控制 ────────────────────────── */ --leading-none: 1; /* 紧凑数据/数字 */ --leading-tight: 1.1; /* 大标题 */ --leading-snug: 1.25; /* 中标题 */ --leading-normal:1.47; /* Apple body 标准 */ --leading-relaxed:1.65; /* 长段落/阅读 */ /* ── Letter spacing — Apple tracking ──────────────────────── */ --tracking-tighter:-0.03em; /* hero 大字 */ --tracking-tight: -0.02em; /* 标题 */ --tracking-normal: 0; /* 正文 */ --tracking-wide: 0.02em; /* 小字/标签 */ --tracking-wider: 0.05em; /* eyebrow/uppercase */ --tracking-widest: 0.12em; /* 极小标注 */ /* ── Font weights — Apple 层级 ────────────────────────────── */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* ── Spacing — 8pt 网格系统 ────────────────────────────────── Apple HIG 基准: 8pt (0.5rem) 所有间距对齐到 4pt 子网格 语义命名 + 数值双轨 */ --space-0: 0; --space-1: 4px; /* 0.25rem · 微间距 */ --space-2: 8px; /* 0.5rem · 网格基数 */ --space-3: 12px; /* 0.75rem · 紧凑间距 */ --space-4: 16px; /* 1rem · 标准内距 · Apple margin */ --space-5: 20px; /* 1.25rem · 中间距 */ --space-6: 24px; /* 1.5rem · 元素间距 */ --space-8: 32px; /* 2rem · 区块内距 */ --space-10: 40px; /* 2.5rem · 区块间距 */ --space-12: 48px; /* 3rem · 大间距 */ --space-16: 64px; /* 4rem · section 间距 */ --space-20: 80px; /* 5rem · section 大间距 */ --space-24: 96px; /* 6rem · page 纵向节奏 */ --space-32: 128px; /* 8rem · hero 纵向节奏 */ /* ── Touch targets — Apple HIG 44pt 最小触控 ──────────────── */ --touch-min: 44px; /* 2.75rem · Apple 最小触控 */ --touch-comfort: 48px; /* 3rem · 舒适触控 */ /* ── Widths — Apple 内容宽度 ────────────────────────────────── */ --content-narrow: 680px; /* 正文阅读 */ --content-default: 980px; /* 标准页面 */ --content-wide: 1200px; /* 宽布局 */ /* ── Fonts ──────────────────────────────────────────────────── 保留品牌字体，但补充 Apple 系统字体回退链 SF Pro → system-ui 作为最终兜底 */ --font-display: 'Fraunces', 'Noto Serif SC', 'Source Han Serif SC', Georgia, 'Times New Roman', serif; --font-body: 'Plus Jakarta Sans', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace; /* ── Z-index 层级 ───────────────────────────────────────────── */ --z-base: 0; --z-above: 1; --z-nav: 50; --z-overlay: 100; --z-modal: 200; --z-toast: 300; } /* ── Dark mode — 暖夜 ────────────────────────────────────────── Apple dark: 不是纯黑，是深灰层次 保留暖调，但对齐 Apple 的深色阶梯对比 */ [data-theme='dark'] { --color-bg: #18160f; --color-surface: #1f1b14; --color-surface-2: #272117; --color-surface-offset:#2e2620; --color-surface-offset-2:#362c24; --color-divider: #3c332b; --color-border: #4c4038; --color-text: #f2eada; --color-text-muted: #a89a86; --color-text-faint: #6b5e52; --color-text-inverse: #1f1b14; --color-primary: #f0a39b; --color-primary-hover: #f5b5ae; --color-primary-active: #e89890; --color-primary-highlight: #4a312c; --color-primary-soft: #3a2622; --color-mint: #b0d2bc; --color-mint-hover: #c3dfca; --color-mint-soft: #2c3a31; --color-gold: #e7be72; --color-gold-hover: #f0cb89; --color-gold-soft: #3a2f1d; --color-violet: #c8b3e8; --color-violet-soft: #322a44; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 8px 0 rgba(0, 0, 0, 0.4), 0 0 1px 0 rgba(0, 0, 0, 0.2); --shadow-lg: 0 8px 24px 0 rgba(0, 0, 0, 0.5), 0 0 1px 0 rgba(0, 0, 0, 0.2); --shadow-xl: 0 16px 48px -4px rgba(0, 0, 0, 0.6); --shadow-float: 0 24px 64px -8px rgba(0, 0, 0, 0.7); --shadow-glow: 0 8px 32px -4px rgba(240, 163, 155, 0.15), 0 0 1px 0 rgba(240, 163, 155, 0.08); } /* ── System dark preference fallback ──────────────────────────── */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #18160f; --color-surface: #1f1b14; --color-surface-2: #272117; --color-surface-offset:#2e2620; --color-divider: #3c332b; --color-border: #4c4038; --color-text: #f2eada; --color-text-muted: #a89a86; --color-text-faint: #6b5e52; --color-primary: #f0a39b; --color-primary-soft: #3a2622; --color-mint: #b0d2bc; --color-gold: #e7be72; --color-violet: #c8b3e8; } }