Build a light/dark theme toggle with persistence

• Colours are defined as CSS custom properties on :root and overridden under a [data-theme="dark"] selector; components use only the variables
• A toggle button switches between light and dark and shows the current mode through its label or aria-pressed
• The choice is stored in localStorage and restored on the next visit; storage access is wrapped in try/catch
• With no saved choice, the initial theme follows prefers-color-scheme, and it updates live if the system setting changes and the user has not chosen
• No flash of the wrong theme: a small inline script in <head> sets data-theme before the body is painted
• color-scheme is set so form controls and scrollbars match the theme

Only after every requirement works.

• A third "system" option in addition to light and dark
• Sync the theme between open tabs using the storage event
• Smooth colour transition that is disabled for users with prefers-reduced-motion