Add design overhaul plan + partial icon work

TODO: Comprehensive design plan for fitness app feel
- Dark theme color palette
- Professional typography guidelines
- SVG icons to replace ALL emojis
- UI component standards
- Inspiration from Nike/FITBOD/Strong

Partial work from Claude Code:
- Icons.jsx component (SVG icons)
- Dashboard.jsx updates (some emoji removal)

frontend/src/pages/WorkoutSelectPage.jsx

@@ -1,32 +1,18 @@
 import { useState, useEffect } from 'react'
+import { Icon, getWorkoutIconName } from '../components/Icons'
 
 const API_URL = '/api'
 
-// Workout icons based on type/name
-const getWorkoutIcon = (name) => {
-  const lower = name.toLowerCase()
-  if (lower.includes('push') || lower.includes('bröst') || lower.includes('chest')) return '💪'
-  if (lower.includes('pull') || lower.includes('rygg') || lower.includes('back')) return '🏋️'
-  if (lower.includes('ben') || lower.includes('leg') || lower.includes('lower')) return '🦵'
-  if (lower.includes('axlar') || lower.includes('shoulder')) return '🎯'
-  if (lower.includes('arm')) return '💪'
-  if (lower.includes('core') || lower.includes('mage')) return '🔥'
-  if (lower.includes('helkropp') || lower.includes('full')) return '⚡'
-  if (lower.includes('överkropp') || lower.includes('upper')) return '💪'
-  if (lower.includes('underkropp') || lower.includes('lower')) return '🦵'
-  return '🏋️'
-}
-
-// Workout color based on type
+// Workout color based on type - more subtle/muted palette
 const getWorkoutColor = (name) => {
   const lower = name.toLowerCase()
-  if (lower.includes('push') || lower.includes('bröst')) return '#ef4444' // Red
-  if (lower.includes('pull') || lower.includes('rygg')) return '#3b82f6' // Blue
-  if (lower.includes('ben') || lower.includes('leg')) return '#8b5cf6' // Purple
-  if (lower.includes('axlar')) return '#f59e0b' // Orange
-  if (lower.includes('överkropp') || lower.includes('upper')) return '#10b981' // Green
-  if (lower.includes('underkropp') || lower.includes('lower')) return '#6366f1' // Indigo
-  return '#6366f1' // Default indigo
+  if (lower.includes('push') || lower.includes('bröst')) return 'var(--workout-push)'
+  if (lower.includes('pull') || lower.includes('rygg')) return 'var(--workout-pull)'
+  if (lower.includes('ben') || lower.includes('leg')) return 'var(--workout-legs)'
+  if (lower.includes('axlar')) return 'var(--workout-shoulders)'
+  if (lower.includes('överkropp') || lower.includes('upper')) return 'var(--workout-upper)'
+  if (lower.includes('underkropp') || lower.includes('lower')) return 'var(--workout-lower)'
+  return 'var(--workout-default)'
 }
 
 function WorkoutSelectPage({ onBack, onSelectWorkout }) {
@@ -72,7 +58,9 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
   return (
     <div className="select-page">
       <header className="page-header">
-        <button className="back-btn" onClick={onBack}>← Tillbaka</button>
+        <button className="back-btn" onClick={onBack}>
+          <Icon name="arrowLeft" size={18} /> Tillbaka
+        </button>
         <h1>Välj pass</h1>
         <div style={{ width: 40 }}></div>
       </header>
@@ -84,20 +72,20 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
 
         <div className="workout-grid">
           {program?.days?.map((workout) => {
-            const icon = getWorkoutIcon(workout.name)
+            const iconName = getWorkoutIconName(workout.name)
             const color = getWorkoutColor(workout.name)
             const isSelected = selectedWorkout?.id === workout.id
             const exerciseCount = workout.exercises?.filter(e => e.name).length || 0
-            
+
             return (
-              <div 
+              <div
                 key={workout.id}
                 className={`workout-select-card ${isSelected ? 'selected' : ''}`}
                 style={{ '--workout-color': color }}
                 onClick={() => handleSelect(workout)}
               >
                 <div className="workout-icon" style={{ background: color }}>
-                  {icon}
+                  <Icon name={iconName} size={28} />
                 </div>
                 <div className="workout-details">
                   <h3>{workout.name}</h3>
@@ -114,7 +102,9 @@ function WorkoutSelectPage({ onBack, onSelectWorkout }) {
                   </div>
                 </div>
                 {isSelected && (
-                  <div className="selected-indicator">✓</div>
+                  <div className="selected-indicator">
+                    <Icon name="check" size={16} />
+                  </div>
                 )}
               </div>
             )