chore: documentatie naar docs/, iconen bijgewerkt, theme.css verplaatst

- scrum4me-*.md en MD3_Color_Scheme_Documentation.md verplaatst naar docs/
- Srum4MeIcons.html verplaatst naar docs/icons.html
- theme.css verplaatst van root naar app/styles/theme.css
- Import in globals.css bijgewerkt
- Alle app-iconen vervangen door nieuw logo (icon-master-light.svg)
- AppIcon component bijgewerkt met nieuw SVG
- CLAUDE.md verwijzingen bijgewerkt

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CLAUDE.md

@@ -16,12 +16,12 @@ Lees het relevante document voordat je aan een feature begint. Nooit gokken over
 
 | Document | Gebruik voor |
 |---|---|
-| `scrum4me-functional-spec.md` | Acceptatiecriteria, randgevallen, user flows |
+| `docs/scrum4me-functional-spec.md` | Acceptatiecriteria, randgevallen, user flows |
-| `scrum4me-architecture.md` | Stack, datamodel, Prisma schema, Zustand stores |
+| `docs/scrum4me-architecture.md` | Stack, datamodel, Prisma schema, Zustand stores |
-| `scrum4me-backlog.md` | Welke task bouwen, volgorde, "done when"-criteria |
+| `docs/scrum4me-backlog.md` | Welke task bouwen, volgorde, "done when"-criteria |
-| `scrum4me-personas.md` | Lars (primair), Dina, Remi — gebruik bij UI-beslissingen |
+| `docs/scrum4me-personas.md` | Lars (primair), Dina, Remi — gebruik bij UI-beslissingen |
-| `scrum4me-product-backlog.md` | Testdata voor de seed |
+| `docs/scrum4me-product-backlog.md` | Testdata voor de seed |
-| `scrum4me-styling.md` | **Lees dit voor elk component** — MD3-kleuren, shadcn patronen |
+| `docs/scrum4me-styling.md` | **Lees dit voor elk component** — MD3-kleuren, shadcn patronen |
 
 ---
 
@@ -38,7 +38,7 @@ M0 (ST-001–008) → M1 (ST-101–110) → M2 (ST-201–210)
 Per task:
 1. Lees de task in `scrum4me-backlog.md`
 2. Zoek de bijbehorende feature-spec in `scrum4me-functional-spec.md`
-3. Lees het relevante patroon in `docs/patterns/` als dat van toepassing is
+3. Lees het relevante patroon in `docs/patterns/` en styling in `docs/scrum4me-styling.md` als dat van toepassing is
 4. Bouw — test — verifieer de "Done when"-criteria
 5. vraag of code juiste is
 6. Commit: `feat: ST-001 project scaffolding`
@@ -52,7 +52,7 @@ Per task:
 Next.js 16 (App Router) + React 19
 TypeScript strict
 Tailwind CSS + shadcn/ui
-MD3 kleurensysteem via theme.css
+MD3 kleurensysteem via app/styles/theme.css
 Zustand (client state)
 dnd-kit (drag-and-drop)
 Prisma v7 + PostgreSQL (Neon) | SQLite (lokaal)

app/globals.css

@@ -1,4 +1,4 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@import "../theme.css";
+@import "./styles/theme.css";

components/shared/app-icon.tsx

@@ -1,7 +1,3 @@
-// components/shared/app-icon.tsx
-// Scrum4Me app icon — concept 5 (Rocket)
-// Gebruik: <AppIcon size={32} /> of <AppIcon size={64} className="..." />
-
 interface AppIconProps {
   size?: number
   className?: string
@@ -20,51 +16,71 @@ export function AppIcon({ size = 32, className }: AppIconProps) {
     >
       <defs>
         <linearGradient id="s4m-bg" x1="0" y1="0" x2="512" y2="512" gradientUnits="userSpaceOnUse">
-          <stop offset="0%" stopColor="#1a1028"/>
+          <stop offset="0%" stopColor="#90b6dc"/>
-          <stop offset="100%" stopColor="#0d0a14"/>
+          <stop offset="100%" stopColor="#e7e0ff"/>
         </linearGradient>
-        <linearGradient id="s4m-nose" x1="256" y1="60" x2="256" y2="212" gradientUnits="userSpaceOnUse">
+        <linearGradient id="s4m-nose" x1="256" y1="52" x2="256" y2="210" gradientUnits="userSpaceOnUse">
-          <stop offset="0%" stopColor="#c4b5fd"/>
+          <stop offset="0%" stopColor="#e9d5ff"/>
           <stop offset="100%" stopColor="#7c3aed"/>
         </linearGradient>
+        <filter id="s4m-glow" x="-20%" y="-20%" width="140%" height="140%">
+          <feGaussianBlur stdDeviation="8" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
+        <filter id="s4m-flame" x="-40%" y="-40%" width="180%" height="180%">
+          <feGaussianBlur stdDeviation="6" result="blur"/>
+          <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
+        </filter>
       </defs>
 
       {/* Background */}
       <rect width="512" height="512" rx="114" fill="url(#s4m-bg)"/>
+      <ellipse cx="256" cy="270" rx="140" ry="160" fill="#c4b5fd" opacity="0.12"/>
 
       {/* Block 1 — PBI */}
-      <rect x="174" y="372" width="164" height="60" rx="12" fill="#4f6ef7" opacity="0.6"/>
+      <rect x="178" y="374" width="156" height="64" rx="14" fill="#dbeafe"/>
+      <rect x="178" y="374" width="156" height="64" rx="14" stroke="#8b5cf6" strokeWidth="2" fill="none"/>
+      <circle cx="210" cy="406" r="5" fill="#7c3aed" opacity="0.8"/>
+      <circle cx="228" cy="406" r="5" fill="#7c3aed" opacity="0.6"/>
+      <circle cx="246" cy="406" r="5" fill="#7c3aed" opacity="0.4"/>
 
       {/* Block 2 — Story */}
-      <rect x="144" y="292" width="224" height="76" rx="12" fill="#6366f1" opacity="0.75"/>
+      <rect x="148" y="294" width="216" height="76" rx="14" fill="#ede9fe"/>
+      <rect x="148" y="294" width="216" height="76" rx="14" stroke="#a78bfa" strokeWidth="2" fill="none"/>
+      <rect x="174" y="322" width="100" height="6" rx="3" fill="#c7d2fe" opacity="0.8"/>
+      <rect x="174" y="338" width="68" height="6" rx="3" fill="#c7d2fe" opacity="0.6"/>
 
       {/* Block 3 — Task */}
-      <rect x="160" y="212" width="192" height="76" rx="12" fill="#7c3aed" opacity="0.9"/>
+      <rect x="164" y="210" width="184" height="80" rx="14" fill="#e9d5ff"/>
+      <rect x="164" y="210" width="184" height="80" rx="14" stroke="#7c3aed" strokeWidth="2" fill="none"/>
+      <path d="M196 252 L212 268 L240 238" stroke="#7135f8" strokeWidth="7" strokeLinecap="round" strokeLinejoin="round" fill="none" opacity="0.95"/>
 
       {/* Rocket nose */}
-      <path
+      <path d="M256 52 C224 52 164 112 164 210 H348 C348 112 288 52 256 52Z"
-        d="M256 60 C222 60 160 122 160 212 H352 C352 122 290 60 256 60Z"
+            fill="url(#s4m-nose)" opacity="0.95" filter="url(#s4m-glow)"/>
-        fill="url(#s4m-nose)"
+      <path d="M256 70 C238 70 200 118 196 190"
-      />
+            stroke="white" strokeWidth="3" strokeLinecap="round" opacity="0.25" fill="none"/>
 
       {/* Window */}
-      <circle cx="256" cy="152" r="30" fill="#0d0a14" opacity="0.5"/>
+      <circle cx="256" cy="148" r="34" fill="#ffffff" opacity="0.85"/>
-      <circle cx="256" cy="152" r="20" fill="#ede9fe" opacity="0.95"/>
+      <circle cx="256" cy="148" r="26" fill="#f8f4ff" opacity="0.95"/>
-      <circle cx="248" cy="144" r="6" fill="white" opacity="0.5"/>
+      <circle cx="256" cy="148" r="18" fill="#ffffff" opacity="0.9"/>
+      <circle cx="248" cy="140" r="5" fill="white" opacity="0.85"/>
 
       {/* Fins */}
-      <path d="M160 332 L108 400 L160 400 Z" fill="#4f6ef7" opacity="0.55"/>
+      <path d="M164 330 L110 400 L164 400 Z" fill="#dbeafe"/>
-      <path d="M352 332 L404 400 L352 400 Z" fill="#4f6ef7" opacity="0.55"/>
+      <path d="M164 330 L110 400 L164 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>
+      <path d="M348 330 L402 400 L348 400 Z" fill="#dbeafe"/>
+      <path d="M348 330 L402 400 L348 400 Z" stroke="#8b5cf6" strokeWidth="1.5" fill="none" opacity="0.75"/>
 
       {/* Flame */}
-      <path
+      <path d="M214 438 Q235 480 256 462 Q277 480 298 438"
-        d="M212 432 Q244 472 256 456 Q268 472 300 432"
+            stroke="#fbbf24" strokeWidth="10" strokeLinecap="round" fill="none"
-        stroke="#f59e0b" strokeWidth="12" strokeLinecap="round" fill="none" opacity="0.95"
+            opacity="0.9" filter="url(#s4m-flame)"/>
-      />
+      <path d="M228 438 Q242 468 256 455 Q270 468 284 438"
-      <path
+            stroke="#fde68a" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.75"/>
-        d="M232 432 Q248 460 256 448 Q264 460 280 432"
+      <path d="M238 438 Q248 458 256 450 Q264 458 274 438"
-        stroke="#fef3c7" strokeWidth="7" strokeLinecap="round" fill="none" opacity="0.7"
+            stroke="#fef3c7" strokeWidth="4" strokeLinecap="round" fill="none" opacity="0.6"/>
-      />
     </svg>
   )
 }