feat(ui): refresh frontend design with cohesive design system

[hechi]

Description

Refreshes the entire frontend interface with a cohesive design system while
keeping all functionality identical. Introduces a refined indigo brand color,
layered shadows, rounded card surfaces, an ambient brand-tinted background,
gradient primary buttons with subtle hover lift, polished list rows/empty
states, custom scrollbars, and consistent keyboard focus rings — all working in
both light and dark mode. No behavior, routes, API calls, i18n keys, or
data-testids were changed.

Type of Change

• UI / styling refresh (no functional change)
• New feature
• Bug fix
• Documentation update

What changed

Design system

• New indigo brand palette in tailwind.config.js; the default blue scale
  is aliased to it so existing blue-* utilities adopt the brand hue without
  markup churn.
• Added design tokens: layered shadows (soft, card, lift), larger radii,
  Inter-based font stack, and fade-in / scale-in animations.
• index.css: brand-tinted ambient background gradient (light + dark), custom
  scrollbars, brand text selection, and :focus-visible rings.

Components

• HomePage: logo badge, gradient wordmark, elevated card, gradient CTA button.
• ListPage: softer rounded card with ring border and gradient header, refined
  stats bar and empty state.
• ListItem, AddItemForm, RecentLists, ShareButton, AutocompleteDropdown,
  ThemeToggle: rounder corners, softer surfaces, hover elevation, gradient
  buttons, animated dropdown.
• Updated PWA theme_color in index.html and vite.config.ts to the new
  brand indigo (#6366f1).

Testing

• Unit tests pass (npm test) — 229 passed
• Lint passes (npm run lint) — no new warnings
• Production build passes (npm run build)
• Manual testing performed

Manual testing: verified live render on the home and list pages in both light
and dark mode via the dev server. Confirmed the brand hue resolves to #4f46e5,
dark-mode surfaces render correctly, and there is no horizontal overflow.

Note: two unit tests (HomePage.test.tsx, ListPage.test.tsx) asserted exact
dark-mode shade classes that the redesign changed. Their assertions were updated
to reference representative dark-mode classes from the new design, preserving the
tests' intent (verifying dark mode is wired up).

Checklist

• Code follows the project's style guidelines
• Documentation updated (CHANGELOG) — entry added under [Unreleased] > Changed
• No debug logging left in code
• No secrets or hardcoded credentials introduced
• Branch is off main (feat/ui-design-refresh), no direct commits to main