/* Yixin — Across the Bay design tokens Night-harbor system: warm bokeh shoreline, one sharp green light. Dark is the primary theme. Toggle via . */ :root { /* ---- Typography ---- */ --font-display: "Space Grotesk", "Avenir Next", system-ui, sans-serif; --font-body: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif; --font-voice: "Cormorant Garamond", Georgia, serif; /* italic emphasis only */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2.125rem; --text-hero: clamp(2.5rem, 6vw, 4.5rem); --tracking-wide: 0.2em; --tracking-tight: -0.02em; --leading-tight: 1.08; --leading-body: 1.6; /* ---- Spacing (8px rhythm) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 1rem; --space-4: 1.5rem; --space-5: 2.5rem; --space-6: 4rem; --space-7: 7rem; /* ---- Shape ---- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-full: 999px; --hairline: 1px; /* ---- Motion ---- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur-slow: 400ms; --dur-breathe: 7s; /* the green light */ /* ---- Layout ---- */ --header-h: 64px; --content-max: 1120px; --shoreline: 46%; /* vertical position of the bokeh band */ } /* ---- Dark (primary): night bay ---- */ :root, [data-theme="dark"] { color-scheme: dark; --sky-top: #010409; --sky-low: #071018; --water-top: #04101a; --water-deep: #02080e; --bg-0: #02060b; --bg-1: #081019; --bg-2: #0e1822; --text-1: #eaf2ee; --text-2: #8ba79a; --line: rgba(180, 220, 200, 0.11); --accent: #3dff9e; --accent-ink: #8dffc6; --accent-soft: rgba(61, 255, 158, 0.12); --bokeh-warm: rgba(255, 196, 120, 0.55); --bokeh-cool: rgba(180, 210, 255, 0.40); --bokeh-opacity: 1; --haze: rgba(140, 170, 190, 0.05); --glass-bg: rgba(2, 6, 11, 0.6); --glass-bg-scrolled: rgba(2, 6, 11, 0.82); --shadow-raise: 0 8px 32px rgba(0, 0, 0, 0.5); --glow-accent: 0 0 24px rgba(61, 255, 158, 0.35); --grain-opacity: 0.06; } /* ---- Light: clean workspace ---- */ [data-theme="light"] { color-scheme: light; --sky-top: #f4f6f9; --sky-low: #eef1f6; --water-top: #f0f2f6; --water-deep: #f8f9fb; --bg-0: #f3f4f8; --bg-1: #ffffff; --bg-2: #f1f3f7; --text-1: #111827; --text-2: #64748b; --line: rgba(15, 23, 42, 0.09); --accent: #0d9f6e; --accent-ink: #047857; --accent-soft: rgba(13, 159, 110, 0.09); --bokeh-warm: rgba(251, 191, 36, 0.12); --bokeh-cool: rgba(99, 102, 241, 0.10); --bokeh-opacity: 0.22; --haze: rgba(148, 163, 184, 0.06); --glass-bg: rgba(255, 255, 255, 0.88); --glass-bg-scrolled: rgba(255, 255, 255, 0.96); --shadow-raise: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 28px rgba(15, 23, 42, 0.06); --glow-accent: 0 0 0 3px rgba(13, 159, 110, 0.14); --grain-opacity: 0.02; }