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/ui/Badge.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		variant?: 'default' | 't-side' | 'ct-side' | 'success' | 'warning' | 'error' | 'info';
+		size?: 'sm' | 'md' | 'lg';
+		class?: string;
+		children: Snippet;
+	}
+
+	let { variant = 'default', size = 'md', class: className = '', children }: Props = $props();
+
+	const baseClasses = 'inline-flex items-center justify-center font-medium border rounded';
+
+	const variantClasses = {
+		default: 'bg-base-300/50 border-base-content/20 text-base-content',
+		't-side':
+			'bg-terrorist/10 border-terrorist/30 text-terrorist-light backdrop-blur-sm font-semibold',
+		'ct-side': 'bg-ct/10 border-ct/30 text-ct-light backdrop-blur-sm font-semibold',
+		success: 'bg-success/10 border-success/30 text-success',
+		warning: 'bg-warning/10 border-warning/30 text-warning',
+		error: 'bg-error/10 border-error/30 text-error',
+		info: 'bg-info/10 border-info/30 text-info'
+	};
+
+	const sizeClasses = {
+		sm: 'px-2 py-0.5 text-xs',
+		md: 'px-2.5 py-1 text-sm',
+		lg: 'px-3 py-1.5 text-base'
+	};
+
+	const classes = `${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`;
+</script>
+
+<span class={classes}>
+	{@render children()}
+</span>