@background-default: #050709; // Page canvas — the base background behind all content.
@background-subtle: #0e1113; // Subtly differentiated background for alternating or grouped sections.
@surface-default: #0e1113; // Default container surface — cards, panels, and inputs on the page.
@surface-raised: #22272b; // Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.
@surface-sunken: #050709; // Recessed surface for wells and inset regions.
@text-default: #f5f5f5; // Primary body and heading text.
@text-muted: #cdd3d6; // Secondary text — supporting copy, captions, metadata.
@text-subtle: #888f92; // Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes.
@text-inverse: #050709; // Text and icons rendered on an action or solid fill.
@text-link: #8ce0ff; // Inline hyperlink text.
@border-default: #353b3f; // Default border for inputs, cards, and dividers.
@border-subtle: #22272b; // Low-emphasis border for subtle separation.
@border-strong: #888f92; // High-emphasis border for focus and selected states.
@action-default: #26aeff; // Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.
@action-hover: #8ce0ff; // Hover and active state for primary actions.
@action-subtle: #001037; // Tinted background for low-emphasis (ghost) actions.
@success-surface: #001600; // Success (positive outcomes and confirmations) — tinted background.
@success-text: #8fc78a; // Success (positive outcomes and confirmations) — readable text on the tint.
@success-border: #005a02; // Success (positive outcomes and confirmations) — border and divider.
@success-solid: #399936; // Success (positive outcomes and confirmations) — solid fill for badges and icons.
@warning-surface: #270400; // Warning (caution and pending states) — tinted background.
@warning-text: #eea88a; // Warning (caution and pending states) — readable text on the tint.
@warning-border: #882f03; // Warning (caution and pending states) — border and divider.
@warning-solid: #d36734; // Warning (caution and pending states) — solid fill for badges and icons.
@danger-surface: #230002; // Danger (errors and destructive actions) — tinted background.
@danger-text: #ea9294; // Danger (errors and destructive actions) — readable text on the tint.
@danger-border: #7c061f; // Danger (errors and destructive actions) — border and divider.
@danger-solid: #c63f4e; // Danger (errors and destructive actions) — solid fill for badges and icons.
@info-surface: #02071c; // Info (neutral information) — tinted background.
@info-text: #8098c2; // Info (neutral information) — readable text on the tint.
@info-border: #193366; // Info (neutral information) — border and divider.
@info-solid: #4264a4; // Info (neutral information) — solid fill for badges and icons.