[data-theme='dark'], .dark {
  --background-default: rgb(5, 7, 9); /** Page canvas — the base background behind all content. */
  --background-subtle: rgb(14, 17, 19); /** Subtly differentiated background for alternating or grouped sections. */
  --surface-default: rgb(14, 17, 19); /** Default container surface — cards, panels, and inputs on the page. */
  --surface-raised: rgb(34, 39, 43); /** Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode. */
  --surface-sunken: rgb(5, 7, 9); /** Recessed surface for wells and inset regions. */
  --text-default: rgb(245, 245, 245); /** Primary body and heading text. */
  --text-muted: rgb(205, 211, 214); /** 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(5, 7, 9); /** Text and icons rendered on an action or solid fill. */
  --text-link: rgb(140, 224, 255); /** Inline hyperlink text. */
  --border-default: rgb(53, 59, 63); /** Default border for inputs, cards, and dividers. */
  --border-subtle: rgb(34, 39, 43); /** Low-emphasis border for subtle separation. */
  --border-strong: rgb(136, 143, 146); /** High-emphasis border for focus and selected states. */
  --action-default: rgb(38, 174, 255); /** Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark. */
  --action-hover: rgb(140, 224, 255); /** Hover and active state for primary actions. */
  --action-subtle: rgb(0, 16, 55); /** Tinted background for low-emphasis (ghost) actions. */
  --success-surface: rgb(0, 22, 0); /** Success (positive outcomes and confirmations) — tinted background. */
  --success-text: rgb(143, 199, 138); /** Success (positive outcomes and confirmations) — readable text on the tint. */
  --success-border: rgb(0, 90, 2); /** Success (positive outcomes and confirmations) — border and divider. */
  --success-solid: rgb(57, 153, 54); /** Success (positive outcomes and confirmations) — solid fill for badges and icons. */
  --warning-surface: rgb(39, 4, 0); /** Warning (caution and pending states) — tinted background. */
  --warning-text: rgb(238, 168, 138); /** Warning (caution and pending states) — readable text on the tint. */
  --warning-border: rgb(136, 47, 3); /** Warning (caution and pending states) — border and divider. */
  --warning-solid: rgb(211, 103, 52); /** Warning (caution and pending states) — solid fill for badges and icons. */
  --danger-surface: rgb(35, 0, 2); /** Danger (errors and destructive actions) — tinted background. */
  --danger-text: rgb(234, 146, 148); /** Danger (errors and destructive actions) — readable text on the tint. */
  --danger-border: rgb(124, 6, 31); /** Danger (errors and destructive actions) — border and divider. */
  --danger-solid: rgb(198, 63, 78); /** Danger (errors and destructive actions) — solid fill for badges and icons. */
  --info-surface: rgb(2, 7, 28); /** Info (neutral information) — tinted background. */
  --info-text: rgb(128, 152, 194); /** Info (neutral information) — readable text on the tint. */
  --info-border: rgb(25, 51, 102); /** Info (neutral information) — border and divider. */
  --info-solid: rgb(66, 100, 164); /** Info (neutral information) — solid fill for badges and icons. */
}