Light and dark colour tokens from one brand colour

Generate light and dark colour tokens from the brand colour hex.

Output CSS custom properties for: page background, raised surface, sunken surface, primary text, secondary text, muted text, hairline, control border, focus ring and the primary button.

Rules:

• Body text must reach 4.5:1 against its background in both themes. Show the ratio next to each pair.
• Don't put the brand colour on large surfaces.
• Dark mode is designed, not inverted: lift surfaces with lightness, not shadows.

:root { /* light */ }
data-theme="dark" { /* dark */ }