Improve markup and accessibility with Kobalte and CSS Modules

[dodok8]

Use Kobalte and CSS Modules to improve accessibility, markup readability, and style encapsulation across the frontend.

Preserve the existing visual design and application behavior while replacing shared global selectors with explicitly scoped styles.

Proposed changes

1. Organize stylesheets

• Keep design tokens, typography variables, and light/dark theme definitions in drfed.css.
• Limit app.css to resets and application-wide base styles.
• Move header, navigation, and content layout styles to app.module.css.
• Move shared panel, field, button, and feedback styles to form.module.css.
• Add page-specific CSS Modules only where a page needs distinct styling.
• Replace string-based classes with CSS Module references, including navigation active states.
• Remove obsolete global selectors once their consumers have been migrated.
• Avoid selectors that depend on another component's internal markup.

2. Introduce Kobalte

• Add @kobalte/core to @drfed/web and update the lockfile.
• Use Kobalte TextField and Button for form controls.
• Associate inputs with labels, descriptions, and field-level errors.
• Style component states using CSS Modules and Kobalte's data-* attributes.
• Retain semantic HTML for page structure, forms, and navigation.
• Extract shared components only where migrated pages have meaningful duplication.

3. Migrate the sign-in page

Use sign-in.tsx as the initial migration to establish the form pattern.

• Preserve the existing server action and FormData submission.
• Preserve the email input's name, type, autocomplete, and required validation.
• Keep pending, success, and error states, including the resend action.
• Disable submission while a request is pending.
• Announce success and error feedback appropriately to assistive technology.
• Distinguish field validation errors from request-level failures.
• Move existing sign-in styles into the appropriate CSS Modules.

4. Migrate the instance and actor creation pages

Apply the verified form pattern to both creation flows.

• Use consistent field spacing, labels, descriptions, and submit buttons.
• Preserve existing field names, validation rules, submitted values, and redirects.
• Keep generated or read-only values readable and included in form submission where required; do not replace readOnly with disabled.
• Provide accessible pending and error feedback.
• Reuse shared form styles without introducing a generic form framework.