Improve contrast of BloomWatch heading on landing page (light and dark themes)

[hazeliscoding]

Problem

The "BloomWatch" heading (h1) on the landing page suffers from poor contrast and readability in both light and dark themes, across desktop and mobile viewports. Multiple users have independently flagged that the heading is hard to read.

Root Cause Analysis

The heading uses the .bloom-gradient-text utility class, which applies --bloom-gradient-kawaii as a background-clip: text gradient. This technique replaces the text fill color with the gradient, making contrast dependent on every color stop in the gradient versus the page background.

Light Theme

Element	Value
Heading gradient (--bloom-gradient-kawaii)	linear-gradient(135deg, #ffd6e8 0%, #d4b8ff 50%, #a8d2ff 100%)
Page background (--bloom-surface-body + --bloom-gradient-surface)	#fdf6fc base, gradient from #fff0f6 to #f5f0ff to #eef6ff

All three gradient stops are light pastels rendered on top of a near-white pastel background:

• #ffd6e8 (pink-100) on #fff0f6 (pink-50 background region) -- estimated contrast ratio ~1.3:1
• #d4b8ff (lilac-200) on #f5f0ff (lilac-50 background region) -- estimated contrast ratio ~1.5:1
• #a8d2ff (blue-200) on #eef6ff (blue-50 background region) -- estimated contrast ratio ~1.4:1

All three are far below the WCAG AA minimum of 3:1 for large text (the heading qualifies as large text at 3rem / 48px desktop and 2.25rem / 36px mobile). The text appears ghostly and washed out.

Dark Theme

Element	Value
Heading gradient (--bloom-gradient-kawaii, dark override)	linear-gradient(135deg, #4a2040 0%, #2e1f4a 50%, #1a2848 100%)
Page background (--bloom-surface-body, dark)	--bloom-neutral-950 = #120e1e, gradient from #1a1228 to #150f20 to #120e1e

All three gradient stops are dark muted tones on a very dark background:

• #4a2040 on #1a1228 -- estimated contrast ratio ~2.2:1
• #2e1f4a on #150f20 -- estimated contrast ratio ~1.6:1
• #1a2848 on #120e1e -- estimated contrast ratio ~1.4:1

Again, all below WCAG AA 3:1 for large text. The heading nearly disappears into the dark background.

Affected Viewports

• Desktop (light mode): Heading is very faint -- pastel-on-pastel
• Desktop (dark mode): Heading is dark-on-dark, barely visible
• Mobile (light mode): Slightly better due to larger relative text, but still insufficient contrast
• Mobile (dark mode): Worst case -- smaller text at 2.25rem with lowest contrast ratios

Relevant Source Files

File	Role
src/BloomWatch.UI/src/app/features/landing/landing.ts	Landing page component; heading uses classes bloom-gradient-text bloom-font-display
src/BloomWatch.UI/src/app/features/landing/landing.scss	Landing page styles; .landing__title sets font-size and line-height
src/BloomWatch.UI/src/app/shared/styles/_utilities.scss	Defines .bloom-gradient-text (line ~410): applies --bloom-gradient-kawaii via background-clip: text
src/BloomWatch.UI/src/app/shared/styles/_tokens.scss	Defines --bloom-gradient-kawaii for light theme (line 177) and dark theme override (line 401)

Suggested Fix

The fix should keep the kawaii/Y2K gradient text aesthetic while achieving WCAG AA large text compliance (3:1 minimum contrast ratio). Two approaches:

Option A: Darken the Light-Theme Gradient / Brighten the Dark-Theme Gradient

Update --bloom-gradient-kawaii (or create a new --bloom-gradient-kawaii-text token) using the 500-level palette colors instead of the 100-200 level pastels:

// Light theme -- use mid-tone palette colors for text gradient
--bloom-gradient-kawaii-text: linear-gradient(135deg, #ff5da0 0%, #a974ff 50%, #3d9aff 100%);
// (pink-400, lilac-400, blue-400) -- all achieve 3:1+ on the pastel background

// Dark theme -- use light pastel palette colors for text gradient  
--bloom-gradient-kawaii-text: linear-gradient(135deg, #ffadd2 0%, #d4b8ff 50%, #a8d2ff 100%);
// (pink-200, lilac-200, blue-200) -- all achieve 3:1+ on the dark background

Then update .bloom-gradient-text (or add a .bloom-gradient-text--heading variant) to use this new token.

Option B: Add a Text Shadow for Depth

Keep the current gradient but add a subtle text shadow to increase perceived contrast:

.landing__title {
  text-shadow: 0 2px 8px rgb(0 0 0 / 0.15); // light theme
}
html[data-theme='dark'] .landing__title {
  text-shadow: 0 2px 12px rgb(255 255 255 / 0.1);
}

This alone may not be sufficient for WCAG compliance but could supplement Option A.

Recommendation

Option A is preferred because it directly solves the contrast problem while maintaining the signature three-color kawaii gradient aesthetic. Creating a separate --bloom-gradient-kawaii-text token avoids breaking the current decorative usage of --bloom-gradient-kawaii in non-text contexts (e.g., the kawaii divider, which is decorative and does not require contrast compliance). The .bloom-gradient-text utility class should then reference the new text-specific token.

Acceptance Criteria

• "BloomWatch" heading on the landing page achieves WCAG AA contrast ratio (3:1 minimum) in light theme
• "BloomWatch" heading on the landing page achieves WCAG AA contrast ratio (3:1 minimum) in dark theme
• The gradient text retains a recognizable kawaii/Y2K multi-color gradient aesthetic
• Fix applies consistently on both desktop and mobile viewports
• The existing .bloom-gradient-text utility does not break other usages (decorative dividers, etc.)
• Verified with a contrast checker tool against actual background colors