Refactor styles to resolve Tailwind CSS v4.0 Sass incompatibility

[Cathy0123456789]

Description

The project is currently generating multiple build warnings indicating that .scss files (specifically global.scss and _tokens.scss) require a preprocessor and are no longer supported by Tailwind CSS v4.0.

Impact:

• Build Fragility: Relying on unsupported configurations may lead to styles not compiling correctly in future updates.
• Performance: Tailwind v4 is optimized for native CSS; continuing to wrap it in Sass prevents the engine from utilizing its full lightning-fast potential.

Tasks

• Audit all .scss files currently flagged by the Tailwind engine.
• Convert .scss files to standard .css files.
• Replace Sass-specific features (nesting, variables, mixins) with native CSS equivalents (CSS nesting, CSS variables).
• Update the build pipeline/imports to reference the new .css entry points.
• Verify that Tailwind @theme variables or @plugin directives are correctly implemented in the new CSS structure.

Acceptance Criteria

• All .scss files mentioned in the warnings are successfully converted to .css.
• The build log no longer contains "requires a preprocessor and is not supported by Tailwind CSS v4.0" warnings.
• Visual regression testing confirms the UI remains identical after the migration.