[BUG]: Fix Team Builder Secondary Text Contrast Across Themes

Start at the Team Debate section and locate the Team Builder component and its theme-specific text styles. Reproduce the subtitle and helper text in light, dark, and high contrast themes, then align their colors with the existing design system while preserving the light theme; verify that both texts remain readable in all supported themes.

Bug Description

On the Team Debate section, the Team Builder component contains supporting text such as “Create or join a team to participate in team debates” below the main heading and “Teams match only with teams of the same size!” below the team size options.

The light theme displays these texts with appropriate contrast and readability. However, in the dark and high contrast themes, these secondary texts appear too muted and low-contrast against the background.

The main issues observed are:

The Team Builder subtitle appears significantly faded in the dark and high contrast themes, making it harder to read.

The “Teams match only with teams of the same size!” helper text also uses a muted color that does not provide sufficient contrast with the dark background.

The text styling does not appear to properly adapt to the active theme, unlike the main headings and other UI elements.

Steps to Reproduce

Sign in to DebateAI.
Navigate to the main page.
Open the Team Debate section.
Locate the Team Builder section.
Observe the subtitle “Create or join a team to participate in team debates”.
Scroll within the Team Builder section and observe “Teams match only with teams of the same size!”.
Switch between the light, dark, and high contrast themes.
Compare the readability and contrast of these secondary texts.

Expected Behavior

The Team Builder secondary text should adapt appropriately to each supported theme.
In the light theme, the current appearance should be preserved.
In the dark theme, the subtitle and helper text should use a suitable light/muted color with enough contrast against the dark background.
In the high contrast theme, these texts should follow the high contrast color system and remain clearly visible and readable.
Theme-specific text colors should be consistent with the application's existing design system rather than relying on a fixed or overly muted color.

Actual Behavior

The Team Builder subtitle and “Teams match only with teams of the same size!” helper text appear too dim in the dark and high contrast themes.
Because of the low contrast, these texts are less readable and visually inconsistent with the rest of the interface.
The light theme does not exhibit this issue.

Logs and Screenshots

https://github.com/user-attachments/assets/027a437f-b153-4bea-8182-878bd6430eb6

Environment Details

No response

Impact

Medium - Feature works but has issues

Code of Conduct

• I have joined the Discord server and will post updates there
• I have searched existing issues to avoid duplicates