/* ───────────────────────────────────────────────────────────── Lazie — Colors, Type, and Semantic CSS Variables ───────────────────────────────────────────────────────────── Source of truth: Sources/LazieDesign.swift (Swift tokens) + Resources/Web/styles.css (WKWebView prototype tokens). Lazie is a macOS menu-bar app built on Apple HIG — system semantic colors dominate, with a small opt-in Brand palette used for moments of identity (the sloth logo, wand anchor, AI accent). Liquid Glass vibrancy is the hallmark surface. ───────────────────────────────────────────────────────────── */ :root { /* ─── Type families ────────────────────────────────────── */ --sf: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; --mono: "SF Mono", ui-monospace, "Menlo", monospace; /* ─── Brand — cream + sloth-mint + warm black ──────────── */ /* Warm near-black used for sloth line-art strokes (not pure #000). */ --brand-warm-black: rgb(43, 42, 40); /* App-icon cream background. */ --brand-cream: rgb(250, 243, 231); /* Sloth-mint — alt app-icon & primary brand fill surface. */ --brand-mint: #7BE5A0; --brand-mint-deep: #30D158; --brand-mint-pale: #D8FFDA; /* ─── AI accent hues ───────────────────────────────────── */ /* Primary accent (iOS systemOrange) — used for actions, active suggestion cards, streaming shimmer peaks, 改写 mono label. Deliberately overrides macOS blue inside Lazie surfaces. */ --accent: #FF9F0A; --accent-soft: rgba(255, 159, 10, 0.14); /* Sparkle glow orange — brighter, used only for ✨ glyph so it reads as "spark of AI," not "primary button." */ --brand-sparkle: #FFB340; /* Alt accent hues (exposed via Settings → 外观 tab) */ --accent-blue: #0A84FF; --accent-pink: #FF5E85; --accent-purple: #BF5AF2; --accent-green: #30D158; /* ─── Ink scale (light mode) ───────────────────────────── */ --ink-1: rgba(0, 0, 0, 0.92); /* body text */ --ink-2: rgba(0, 0, 0, 0.62); /* secondary */ --ink-3: rgba(0, 0, 0, 0.42); /* tertiary / placeholder */ --ink-4: rgba(0, 0, 0, 0.22); /* quaternary */ --ink-hair: rgba(0, 0, 0, 0.08); /* hairlines */ /* Highlight — selection yellow */ --highlight: rgba(255, 214, 10, 0.55); /* ─── Liquid Glass surface tokens ──────────────────────── */ --glass-bg: rgba(255, 255, 255, 0.55); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-rim-top: rgba(255, 255, 255, 0.95); --glass-rim-side: rgba(255, 255, 255, 0.35); --glass-rim-bottom: rgba(0, 0, 0, 0.04); /* ─── Elevation / shadow system ────────────────────────── */ /* Toolbar anchor — subtle inset rim + lifted drop. */ --shadow-1: 0 0.5px 0 rgba(255,255,255,0.9) inset, 0 -0.5px 0 rgba(0,0,0,0.06) inset, 0 1px 1px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.12), 0 24px 64px rgba(0,0,0,0.16); /* Floating panel — heavier 4-layer stack, gives the "card hovering in mid-air over the app below" depth that defines the brand. */ --shadow-float: 0 0.5px 0 rgba(255,255,255,0.85) inset, 0 0 0 0.5px rgba(0,0,0,0.08), 0 6px 20px rgba(0,0,0,0.18), 0 18px 48px rgba(0,0,0,0.22); /* ─── Radius scale ─────────────────────────────────────── */ --r-sm: 8px; /* small controls, kbd badges */ --r-md: 12px; /* chips, dropdowns */ --r-panel: 16px; /* translate/rewrite panels */ --r-chip: 12px; --r-card: 10px; /* suggestion cards */ --r-pill: 999px; /* toolbar, anchor buttons */ /* ─── Spacing scale ────────────────────────────────────── */ --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 20px; --s-2xl: 24px; /* ─── Motion ───────────────────────────────────────────── */ --motion-appear: 220ms; --motion-dismiss: 160ms; --motion-ease-out: cubic-bezier(.2,.8,.2,1); --motion-spring: cubic-bezier(.2,1.4,.3,1); --press-scale: 0.92; --appear-scale: 0.98; /* ─── Semantic type roles ──────────────────────────────── */ /* Body — 15.5pt / medium. Slightly weightier than native SF body to match the prototype's custom 450 weight. */ --t-body-size: 15.5px; --t-body-weight: 500; --t-body-line: 1.55; --t-body-emphasized-weight: 600; /* Toolbar / button label — 13pt medium. */ --t-toolbar-size: 13px; --t-toolbar-weight: 500; /* Small / caption */ --t-small-size: 12px; --t-small-weight: 400; /* Chip label */ --t-chip-size: 11px; --t-chip-weight: 500; /* Mono label — 9.5pt semibold, "改写" prefix. */ --t-mono-size: 9.5px; --t-mono-weight: 600; /* Summary mono — 10.5pt semibold, "原文 · N 字" details. */ --t-summary-size: 10.5px; --t-summary-weight: 600; /* Uppercase meta label */ --t-upper-size: 10.5px; --t-upper-weight: 600; /* Display — used on the settings / onboarding window chrome. */ --t-display-size: 22px; --t-display-weight: 700; --t-title-size: 17px; --t-title-weight: 600; } /* ─── Dark-mode ink scale (system appearance) ───────────── */ @media (prefers-color-scheme: dark) { :root { --ink-1: rgba(255, 255, 255, 0.95); --ink-2: rgba(255, 255, 255, 0.62); --ink-3: rgba(255, 255, 255, 0.42); --ink-4: rgba(255, 255, 255, 0.22); --ink-hair: rgba(255, 255, 255, 0.10); --glass-bg: rgba(40, 40, 42, 0.65); --glass-bg-strong: rgba(40, 40, 42, 0.85); --glass-rim-top: rgba(255, 255, 255, 0.18); --glass-rim-side: rgba(255, 255, 255, 0.08); --glass-rim-bottom: rgba(0, 0, 0, 0.3); } } /* ───────────────────────────────────────────────────────── Semantic type roles — drop-in classes ───────────────────────────────────────────────────────── */ .t-display { font-family: var(--sf); font-size: var(--t-display-size); font-weight: var(--t-display-weight); color: var(--ink-1); letter-spacing: -0.01em; } .t-title { font-family: var(--sf); font-size: var(--t-title-size); font-weight: var(--t-title-weight); color: var(--ink-1); letter-spacing: 0.05px; } .t-body { font-family: var(--sf); font-size: var(--t-body-size); font-weight: var(--t-body-weight); line-height: var(--t-body-line); color: var(--ink-1); } .t-body-em { font-family: var(--sf); font-size: var(--t-body-size); font-weight: var(--t-body-emphasized-weight); line-height: var(--t-body-line); color: var(--ink-1); } .t-toolbar { font-family: var(--sf); font-size: var(--t-toolbar-size); font-weight: var(--t-toolbar-weight); color: var(--ink-1); letter-spacing: 0.1px; } .t-small { font-family: var(--sf); font-size: var(--t-small-size); font-weight: var(--t-small-weight); color: var(--ink-2); } .t-chip { font-family: var(--sf); font-size: var(--t-chip-size); font-weight: var(--t-chip-weight); color: var(--ink-2); } .t-mono { font-family: var(--mono); font-size: var(--t-mono-size); font-weight: var(--t-mono-weight); color: var(--accent); letter-spacing: 0.4px; text-transform: uppercase; } .t-summary-mono { font-family: var(--mono); font-size: var(--t-summary-size); font-weight: var(--t-summary-weight); color: var(--ink-2); letter-spacing: 0.3px; } .t-upper { font-family: var(--sf); font-size: var(--t-upper-size); font-weight: var(--t-upper-weight); color: var(--ink-3); letter-spacing: 0.8px; text-transform: uppercase; }