@background-default: hsl(0, 0%, 98.039216%); // Page canvas — the base background behind all content.
@background-subtle: hsl(0, 0%, 96.078431%); // Subtly differentiated background for alternating or grouped sections.
@surface-default: hsl(0, 0%, 100%); // Default container surface — cards, panels, and inputs on the page.
@surface-raised: hsl(0, 0%, 100%); // Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.
@surface-sunken: hsl(0, 0%, 96.078431%); // Recessed surface for wells and inset regions.
@text-default: hsl(204, 15.151515%, 6.470588%); // Primary body and heading text.
@text-muted: hsl(201.818182, 7.006369%, 30.784314%); // Secondary text — supporting copy, captions, metadata.
@text-subtle: hsl(198, 4.385965%, 55.294118%); // Tertiary text — placeholders and disabled labels. The mid-grey reads in both modes.
@text-inverse: hsl(0, 0%, 100%); // Text and icons rendered on an action or solid fill.
@text-link: hsl(217.2, 100%, 19.607843%); // Inline hyperlink text.
@border-default: hsl(195, 6.060606%, 87.058824%); // Default border for inputs, cards, and dividers.
@border-subtle: hsl(0, 0%, 92.156863%); // Low-emphasis border for subtle separation.
@border-strong: hsl(198, 4.385965%, 55.294118%); // High-emphasis border for focus and selected states.
@action-default: hsl(217.2, 100%, 19.607843%); // Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.
@action-hover: hsl(222.545455, 100%, 10.784314%); // Hover and active state for primary actions.
@action-subtle: hsl(196, 100%, 97.058824%); // Tinted background for low-emphasis (ghost) actions.
@success-surface: hsl(110, 50%, 95.294118%); // Success (positive outcomes and confirmations) — tinted background.
@success-text: hsl(121.333333, 100%, 17.647059%); // Success (positive outcomes and confirmations) — readable text on the tint.
@success-border: hsl(115.081967, 35.260116%, 66.078431%); // Success (positive outcomes and confirmations) — border and divider.
@success-solid: hsl(123.043478, 100%, 27.058824%); // Success (positive outcomes and confirmations) — solid fill for badges and icons.
@warning-surface: hsl(20, 100%, 96.470588%); // Warning (caution and pending states) — tinted background.
@warning-text: hsl(19.849624, 95.683453%, 27.254902%); // Warning (caution and pending states) — readable text on the tint.
@warning-border: hsl(18, 74.626866%, 73.72549%); // Warning (caution and pending states) — border and divider.
@warning-solid: hsl(23.880597, 100%, 39.411765%); // Warning (caution and pending states) — solid fill for badges and icons.
@danger-surface: hsl(3.75, 100%, 96.862745%); // Danger (errors and destructive actions) — tinted background.
@danger-text: hsl(347.288136, 90.769231%, 25.490196%); // Danger (errors and destructive actions) — readable text on the tint.
@danger-border: hsl(358.636364, 67.692308%, 74.509804%); // Danger (errors and destructive actions) — border and divider.
@danger-solid: hsl(346.626506, 82.178218%, 39.607843%); // Danger (errors and destructive actions) — solid fill for badges and icons.
@info-surface: hsl(218.571429, 46.666667%, 94.117647%); // Info (neutral information) — tinted background.
@info-text: hsl(219.74026, 60.629921%, 24.901961%); // Info (neutral information) — readable text on the tint.
@info-border: hsl(218.181818, 35.106383%, 63.137255%); // Info (neutral information) — border and divider.
@info-solid: hsl(219.813084, 53.768844%, 39.019608%); // Info (neutral information) — solid fill for badges and icons.