/* Money Blueprint — design system v1 · TOKENS (single source of truth). Scoped to `.mb-ds` (NOT :root) so it never overrides the legacy tokens that un-migrated screens depend on. Opt in by putting class="mb-ds" on a root element (the /style route, future migrated screens, and the landing ). Mirror any change into money-blueprint-landing/styles/ds/tokens.css. */ .mb-ds { /* base + surfaces — warm near-black, editorial */ --bg:#0B0B12; --surface-1:#14141F; --surface-2:#1C1C2B; --surface-3:#25253A; --border:rgba(255,255,255,0.08); --border-2:rgba(255,255,255,0.14); --hairline:rgba(99,102,241,0.38); /* brand accent — INDIGO */ --accent:#6366F1; --accent-hi:#818CF8; --accent-deep:#4F46E5; --accent-bg:rgba(99,102,241,0.10); --accent-bg-2:rgba(99,102,241,0.16); --amb:99,102,241; /* ink */ --ink:#FFFFFF; --ink-dim:#A0A0B8; --ink-mute:#6B6B85; /* functional — one each */ --green:#10B981; --green-bg:rgba(16,185,129,0.10); --red:#EF4444; --red-bg:rgba(239,68,68,0.10); /* type */ --font-sans:'DM Sans', system-ui, -apple-system, sans-serif; --font-mono:'JetBrains Mono', ui-monospace, monospace; /* radii / spacing / elevation */ --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px; --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --shadow:0 8px 40px rgba(0,0,0,0.45); --glow:0 8px 40px rgba(var(--amb),0.30); /* base setup for any .mb-ds surface */ background:var(--bg); color:var(--ink); font-family:var(--font-sans); line-height:1.6; position:relative; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .mb-ds *, .mb-ds *::before, .mb-ds *::after { box-sizing:border-box; }