Verify and fix contrast of muted text and tag chips across Callora components for WCAG AA

[greatest0fallt1me]

Description

This is a UI/UX accessibility issue. Several surfaces rely on var(--muted) text and translucent backgrounds — e.g. ApiCard tag chips with background: rgba(255,255,255,0.02) and muted text in src/components/ApiCard.tsx, FiltersSidebar.tsx, and the .helper-text usages. On the light/dark --page-bg these combinations may fall below the WCAG 2.1 AA 4.5:1 (3:1 for large text) threshold.

Requirements and Context

• Audit --muted text, tag chips, and helper/placeholder text against backgrounds in both themes.
• Adjust the affected token values or component styles to meet AA contrast without breaking the visual language.
• Document the measured contrast ratios for the key text/background pairs.
• Must be secure, tested, and documented
• Should be efficient and easy to review

Suggested Execution

1. Fork the repo and create a branch

   git checkout -b task/contrast-audit

2. Implement changes
   • src/index.css — adjust --muted and chip background tokens as needed
   • src/components/ApiCard.tsx — move chip styling to tokenized classes if it blocks the fix
3. Test and commit
   • Measure ratios with a contrast tool on Marketplace, ApiCard, and helper text in both themes
   • Include the before/after ratios in the PR
   • Include test output and notes in the PR

Example commit message

task: raise muted text and chip contrast to WCAG AA

Acceptance Criteria

• Muted/body text meets 4.5:1 (large text 3:1) in both themes
• Tag chip text/background meets AA contrast
• Measured ratios are documented in the PR
• No visual regression to the overall look

Guidelines

• Meet WCAG 2.1 AA 1.4.3 (Contrast Minimum)
• Clear documentation and inline comments
• Timeframe: 96 hours