ZEVA 2 - Implement modal styles

**Describe the task**
Modal widows need to be standardized as a part of design system. All modals follow a unified structure and size but vary by purpose (error, success, warning, info ).
**Purpose**
To create a consistent, reusable, and accessible modal component that aligns with the design system, improves ux and reduces inconsistencies across the product.

**Acceptance Criteria**
All modals follow the same structure:
- [ ] Close icon (top-right)
- [ ] Contextual icon (error, warning, success, info ) (top-left)
- [ ] Title (mandatory) H3 from design system 20/28 BC Sans
- [ ] Main text (mandatory) Body medium bold from design system 16/24 BC Sans
- [ ] Additional text (optional) Body small from design system 14/21 BC Sans
- [ ] Two action buttons (primary on the right, secondary on the left) except informal pop up with one secondary button (Close/Ok)

Size constrains
- [ ] Minimum width: 460 px
- [ ] Max width: 660 px
- [ ] Padding: 24 px on all sides

Variations
- [ ] Error / Destructive action ; Icon: Error (red CE3E39) Primary button: red (destructive/small)Use when action is irreversible (e.g. reject, delete) Only one primary action is allowed
- [ ] Success/Confirmation - Icon: success (green 42814A) ; Primary button: blue (primary/small) Use when confirming, recommending, or approving something.
- [ ] Warning / Caution - Icon: warning (8E5E06) Use when user is about to take a potentially risky action.
- [ ] Informal / Process - Icon: info (053662) ;Secondary button (small) or primary + secondary; Use for instructions, notifications, or progress related actions.

**Additional context**
Popup component from Zeva 1 that can be referenced: frontend/src/app/components/Modal.js
Variations are described in the detail in [style guide](https://bcgov.sharepoint.com/:b:/r/teams/00598-TeamZelda/Shared%20Documents/Team%20Zelda/_ZEVA/ZEVA%20Rebuild/Design%20system/style%20guide%20(modals%20added).pdf?csf=1&web=1&e=f2ZpMx)
You can use designs from [figma file](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=442-2999&t=HQoE6epZrHXErYXI-1)
Most cases require Title + main text
Visual designs follows the system color palette and icon rules
Icon source [font awesome](https://fontawesome.com/search?q=check&o=r&ic=free&s=solid&it=filled&ip=classic) you can see exact icons in this table in [figma file](https://www.figma.com/design/7Qgou3rxcHHk5qbmD9538x/ZEVA-2?node-id=186-706&t=HQoE6epZrHXErYXI-1)