Phase 5: Design Tokens & Mobile Nav

[elfensky]

Foundation for the full redesign. Design tokens come first, then fix mobile navigation.

Design Tokens

• Define design tokens in CSS/Tailwind
  • Colors: map CSS vars (--orange, --cyan, --blue, --black) to final palette
  • Typography ✅ (fluid clamp() scale already done)
  • Spacing: standardize gutters, padding, gaps
  • Shadows, borders, radii
• Patch color palette — replace leftover purple/blue-ish with Helldivers yellow/cyan
• Create reusable component patterns: cards, buttons, section containers
• Define breakpoint semantics (default→phone, sm→tablet portrait, md→tablet landscape, lg→desktop, xl→wide, 2xl→max-width, 3xl→ultrawide)

Mobile Navigation

• Rewrite mobile nav as a proper React component (replace vanilla navigation.js)
• Slide-out or slide-down mobile menu with backdrop
• Smooth open/close animation (CSS transitions, no layout shift)
• Close on route change and outside click
• Sign-in button with distinct mobile style