Act as a senior product designer. Build a color system for {{business_name}}'s site from our brand colors: {{brand_colors}}. Our voice is {{brand_voice}}. Read the existing styles first and list every color value in use, with how often it appears. Build it in three layers: 1. Primitives: for each brand color and one neutral, a 10-step ramp from 50 to 900 with hex values. Tint the neutrals slightly toward the brand hue instead of pure gray. 2. Semantic tokens with roles: background, surface, surface-raised, text, text-muted, border, border-strong, accent, accent-hover, accent-pressed, on-accent, focus-ring, link, and success, warning, danger and info, each with a subtle background version. 3. Component use: which tokens buttons, inputs, cards, alerts, badges and navigation use, so no component references a raw hex value. Contrast, with the ratio for every pair: body and muted text at least 4.5:1 on every background they sit on; large text and input borders at least 3:1; the focus ring at least 3:1 against both the element and the page. If a brand color fails as text, keep it for fills and add a darker text version. Dark theme: build it from the same roles, not by inverting. Backgrounds near #0F0F10 rather than pure black, surfaces lighter as they rise, the accent slightly desaturated so it doesn't glow, text around #EDEDED. Re-check every pair. Rules: one accent for actions; status colors only for status; no gradients unless the brand truly has one; never color alone to carry meaning. Apply the tokens through the existing styling system, keep components and routes, and follow the system setting with a manual toggle and no flash on load. Finish with a token table (name, light hex, dark hex, role, contrast) and a list of changes.