# Juris PMS colour system

The colour foundation is adapted from Figma nodes `4:1180` and `4:1459`. The raw ramps remain reference values; product UI should consume semantic roles so theme changes do not alter component APIs.

## Theme selection

The active theme is placed on the document root as `data-theme="light"` or `data-theme="dark"`. A saved `juris-theme` value in `localStorage` always wins. When no explicit `light` or `dark` value exists, Juris PMS follows `prefers-color-scheme`. Selecting `system` removes the saved value.

The inline head initializer resolves the theme before styles render. The Vue theme utility keeps the root synchronized. It observes operating-system changes, but applies them only while no explicit preference is stored.

## Palette and semantic roles

- Neutral supplies page, surface, text, border, and disabled states.
- Primary blue supplies actions, links, selected states, and focus indicators.
- Success, warning, and danger communicate outcomes. Always pair colour with text or an icon; colour must not carry meaning alone.
- Use `bg-page`, `bg-surface`, `bg-surface-elevated`, `text-content`, `text-content-secondary`, `text-content-muted`, `border-border`, and `outline-focus` in templates.
- Use action and status tokens rather than raw shade utilities in components. Raw ramps are appropriate only for token documentation and exceptional data visualisation.
- Disabled colours indicate unavailable controls but must still be paired with the native `disabled` state.

Light mode uses bright neutral surfaces and accessible darker blue actions. Dark mode remaps the same semantic names to neutral 900/800 surfaces, light text, lighter blue actions, and dark status surfaces. No component-specific dark-mode duplication is required.

## Motion

The global reduced-motion query shortens animation and transition durations and disables smooth scrolling when the operating system requests reduced motion.

The development-only preview is available at `/dev/ui/colours` in local and testing environments. It is not registered in production.
