feat: implement CS2-inspired design system and UI components

This commit delivers a comprehensive design system and component library
inspired by Counter-Strike 2's tactical aesthetic.

Design System:
- Created docs/DESIGN.md with complete design language documentation
- CS2-inspired color palette: T-side orange (#d4a74a), CT-side blue (#5e98d9)
- Dark-first approach with tactical, data-dense layouts
- Typography scale, spacing system, and animation guidelines

Component Library:
- Button component: 4 variants (primary, secondary, ghost, danger), 3 sizes
- Badge component: 7 variants including team-specific badges
- Card component: 3 variants (default, elevated, interactive)
- Header component: Responsive navigation with mobile menu
- Footer component: Site-wide footer with organized link sections

Pages:
- Redesigned homepage with hero section, featured matches, features grid, CTA
- Created placeholder pages: /matches, /players, /about
- All pages follow CS2 aesthetic with proper component usage

Technical Fixes:
- Fixed Svelte 5 snippet syntax errors (removed incorrect render prop pattern)
- Fixed Card component accessibility (conditional button/div rendering)
- Removed invalid CSS border-border class from app.css
- Ensured zero TypeScript errors and warnings

Build Status: ✓ Verified with 0 errors, 0 warnings

🤖 Generated with [Claude Code](https://claude.com/claude-code)

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

src/lib/components/layout/Header.svelte

@@ -0,0 +1,77 @@
+<script lang="ts">
+	import { Search, Menu, X } from 'lucide-svelte';
+
+	let mobileMenuOpen = $state(false);
+
+	const navigation = [
+		{ name: 'Home', href: '/' },
+		{ name: 'Matches', href: '/matches' },
+		{ name: 'Players', href: '/players' },
+		{ name: 'About', href: '/about' }
+	];
+</script>
+
+<header class="sticky top-0 z-50 w-full border-b border-base-300 bg-base-100/95 backdrop-blur-md">
+	<div class="container mx-auto px-4">
+		<div class="flex h-16 items-center justify-between">
+			<!-- Logo -->
+			<a
+				href="/"
+				class="flex items-center gap-2 text-2xl font-bold transition-transform hover:scale-105"
+			>
+				<span class="text-primary">CS2</span><span class="text-secondary">.WTF</span>
+			</a>
+
+			<!-- Desktop Navigation -->
+			<nav class="hidden items-center gap-6 md:flex">
+				{#each navigation as item}
+					<a
+						href={item.href}
+						class="text-sm font-medium text-base-content/70 transition-colors hover:text-primary"
+					>
+						{item.name}
+					</a>
+				{/each}
+			</nav>
+
+			<!-- Search & Actions -->
+			<div class="flex items-center gap-3">
+				<button
+					class="btn btn-ghost btn-sm hidden md:inline-flex"
+					aria-label="Search"
+					title="Search (Cmd+K)"
+				>
+					<Search class="h-5 w-5" />
+				</button>
+
+				<!-- Mobile Menu Toggle -->
+				<button
+					class="btn btn-ghost btn-sm md:hidden"
+					onclick={() => (mobileMenuOpen = !mobileMenuOpen)}
+					aria-label="Toggle menu"
+				>
+					{#if mobileMenuOpen}
+						<X class="h-5 w-5" />
+					{:else}
+						<Menu class="h-5 w-5" />
+					{/if}
+				</button>
+			</div>
+		</div>
+
+		<!-- Mobile Navigation -->
+		{#if mobileMenuOpen}
+			<nav class="animate-fade-in border-t border-base-300 py-4 md:hidden">
+				{#each navigation as item}
+					<a
+						href={item.href}
+						class="block px-4 py-2 text-sm font-medium text-base-content transition-colors hover:bg-base-200"
+						onclick={() => (mobileMenuOpen = false)}
+					>
+						{item.name}
+					</a>
+				{/each}
+			</nav>
+		{/if}
+	</div>
+</header>