@background-default: hsl(210, 28.571429%, 2.745098%); // Page canvas — the base background behind all content.
@background-subtle: hsl(204, 15.151515%, 6.470588%); // Subtly differentiated background for alternating or grouped sections.
@surface-default: hsl(204, 15.151515%, 6.470588%); // Default container surface — cards, panels, and inputs on the page.
@surface-raised: hsl(206.666667, 11.688312%, 15.098039%); // Raised surface for higher-elevation layers (menus, popovers, dialogs). Higher elevation reads lighter in dark mode.
@surface-sunken: hsl(210, 28.571429%, 2.745098%); // Recessed surface for wells and inset regions.
@text-default: hsl(0, 0%, 96.078431%); // Primary body and heading text.
@text-muted: hsl(200, 9.89011%, 82.156863%); // 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(210, 28.571429%, 2.745098%); // Text and icons rendered on an action or solid fill.
@text-link: hsl(196.173913, 100%, 77.45098%); // Inline hyperlink text.
@border-default: hsl(204, 8.62069%, 22.745098%); // Default border for inputs, cards, and dividers.
@border-subtle: hsl(206.666667, 11.688312%, 15.098039%); // 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(202.396313, 100%, 57.45098%); // Primary interactive colour — buttons, links, key accents. NSW navy in light, brightened for contrast in dark.
@action-hover: hsl(196.173913, 100%, 77.45098%); // Hover and active state for primary actions.
@action-subtle: hsl(222.545455, 100%, 10.784314%); // Tinted background for low-emphasis (ghost) actions.
@success-surface: hsl(120, 100%, 4.313725%); // Success (positive outcomes and confirmations) — tinted background.
@success-text: hsl(115.081967, 35.260116%, 66.078431%); // Success (positive outcomes and confirmations) — readable text on the tint.
@success-border: hsl(121.333333, 100%, 17.647059%); // Success (positive outcomes and confirmations) — border and divider.
@success-solid: hsl(118.181818, 47.826087%, 40.588235%); // Success (positive outcomes and confirmations) — solid fill for badges and icons.
@warning-surface: hsl(6.153846, 100%, 7.647059%); // Warning (caution and pending states) — tinted background.
@warning-text: hsl(18, 74.626866%, 73.72549%); // Warning (caution and pending states) — readable text on the tint.
@warning-border: hsl(19.849624, 95.683453%, 27.254902%); // Warning (caution and pending states) — border and divider.
@warning-solid: hsl(19.245283, 64.37247%, 51.568627%); // Warning (caution and pending states) — solid fill for badges and icons.
@danger-surface: hsl(356.571429, 100%, 6.862745%); // Danger (errors and destructive actions) — tinted background.
@danger-text: hsl(358.636364, 67.692308%, 74.509804%); // Danger (errors and destructive actions) — readable text on the tint.
@danger-border: hsl(347.288136, 90.769231%, 25.490196%); // Danger (errors and destructive actions) — border and divider.
@danger-solid: hsl(353.333333, 54.216867%, 51.176471%); // Danger (errors and destructive actions) — solid fill for badges and icons.
@info-surface: hsl(228.461538, 86.666667%, 5.882353%); // Info (neutral information) — tinted background.
@info-text: hsl(218.181818, 35.106383%, 63.137255%); // Info (neutral information) — readable text on the tint.
@info-border: hsl(219.74026, 60.629921%, 24.901961%); // Info (neutral information) — border and divider.
@info-solid: hsl(219.183673, 42.608696%, 45.098039%); // Info (neutral information) — solid fill for badges and icons.