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