@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.