:root {
  --background-default: rgb(250, 250, 250); /** Page canvas — the base background behind all content. */
  --background-subtle: rgb(245, 245, 245); /** Subtly differentiated background for alternating or grouped sections. */
  --surface-default: rgb(255, 255, 255); /** Default container surface — cards, panels, and inputs on the page. */
  --surface-raised: rgb(255, 255, 255); /** Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode. */
  --surface-sunken: rgb(245, 245, 245); /** Recessed surface for wells and inset regions. */
  --text-default: rgb(14, 17, 19); /** Primary body and heading text. */
  --text-muted: rgb(73, 80, 84); /** Secondary text — supporting copy, captions, metadata. */
  --text-subtle: rgb(136, 143, 146); /** Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes. */
  --text-inverse: rgb(255, 255, 255); /** Text and icons rendered on an action or solid fill. */
  --text-link: rgb(0, 38, 100); /** Inline hyperlink text. */
  --border-default: rgb(220, 223, 224); /** Default border for inputs, cards, and dividers. */
  --border-subtle: rgb(235, 235, 235); /** Low-emphasis border for subtle separation. */
  --border-strong: rgb(136, 143, 146); /** High-emphasis border for focus and selected states. */
  --action-default: rgb(0, 38, 100); /** Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark. */
  --action-hover: rgb(0, 16, 55); /** Hover and active state for primary actions. */
  --action-subtle: rgb(240, 251, 255); /** Tinted background for low-emphasis (ghost) actions. */
  --success-surface: rgb(239, 249, 237); /** Success (positive outcomes and confirmations) — tinted background. */
  --success-text: rgb(0, 90, 2); /** Success (positive outcomes and confirmations) — readable text on the tint. */
  --success-border: rgb(143, 199, 138); /** Success (positive outcomes and confirmations) — border and divider. */
  --success-solid: rgb(0, 138, 7); /** Success (positive outcomes and confirmations) — solid fill for badges and icons. */
  --warning-surface: rgb(255, 243, 237); /** Warning (caution and pending states) — tinted background. */
  --warning-text: rgb(136, 47, 3); /** Warning (caution and pending states) — readable text on the tint. */
  --warning-border: rgb(238, 168, 138); /** Warning (caution and pending states) — border and divider. */
  --warning-solid: rgb(201, 80, 0); /** Warning (caution and pending states) — solid fill for badges and icons. */
  --danger-surface: rgb(255, 240, 239); /** Danger (errors and destructive actions) — tinted background. */
  --danger-text: rgb(124, 6, 31); /** Danger (errors and destructive actions) — readable text on the tint. */
  --danger-border: rgb(234, 146, 148); /** Danger (errors and destructive actions) — border and divider. */
  --danger-solid: rgb(184, 18, 55); /** Danger (errors and destructive actions) — solid fill for badges and icons. */
  --info-surface: rgb(233, 238, 247); /** Info (neutral information) — tinted background. */
  --info-text: rgb(25, 51, 102); /** Info (neutral information) — readable text on the tint. */
  --info-border: rgb(128, 152, 194); /** Info (neutral information) — border and divider. */
  --info-solid: rgb(46, 82, 153); /** Info (neutral information) — solid fill for badges and icons. */
}