[Bug] Course search panel on the Competency Management page doesn't match the Paragon components and tokens in the design #836

Environment: Master Sandbox, https://apps.master.openedx.io/authoring/taxonomy/45/competencies

Design: Figma, "Apply Competencies" frame

The design builds the course search panel from Paragon components with specific properties and spacing tokens. In the points below, the implementation uses the same Paragon components but with different properties, or hard-coded values in place of the tokens. The values from the design were read from the Figma properties panel.

1. The "Start Date" button uses different Button properties than the design.
   • Design: Paragon Button, color Tertiary, size Small, the date_range icon before the label. The button keeps the same style when a date range is selected.
   • Implementation: variant="outline-primary", which switches to a filled variant="primary" once dates are selected. The button has the default size and the calendar icon after the label (iconAfter={Calendar}).
   • Expected: variant="tertiary", size="sm", iconBefore={Calendar}, with the same variant whether or not dates are selected.

2. The pagination below the course list uses the default size.
   • Design: Paragon Pagination, size Small, with a 1px gray/100 border above it.
   • Expected: size="small" and a top border using --pgn-color-gray-100.

3. The gap between the search field and the "Start Date" button is 16px.
   • Design: the gap is 8px.
   • Expected: gap={2} on the toolbar Stack instead of gap={3}.

4. Several styles in src/taxonomy/competency-management/course-search/CourseSearchBrowse.scss are hard-coded, although Paragon has tokens with exactly the same values. Replacing them doesn't change how the page looks, but keeps the page in sync if the theme changes.

   Where	Current value	Paragon token
   $block-shadow (line 23), used by the course and section cards (&__group, line 160) and the subsection card (&__subsection, line 204)	0 0 4px rgb(0 0 0 / .15), 0 0 2px rgb(0 0 0 / .15)	var(--pgn-elevation-box-shadow-centered-1) (the design uses the "Elevation Level 1 (Centered)" style)
   &__toolbar .pgn__searchfield: border-radius (line 59) and --pgn-size-search-field-border-radius (line 62)	6px	var(--pgn-size-border-radius-base)
   &__section-label (line 101) and &__associations-label (line 115)	padding: 4px 8px	var(--pgn-spacing-spacer-1) var(--pgn-spacing-spacer-2)
   &__toolbar (line 52)	padding: 24px 0	var(--pgn-spacing-spacer-4) 0
   $container-padding-x (line 11), used by &__container (line 89) and &__associations (line 129)	16px	var(--pgn-spacing-spacer-3)