standardize design to s/w standard - fix non-standard color usage

- replace hardcoded green/red/blue colors with standard shadcn semantic colors
- use text-primary, text-secondary-foreground, text-muted-foreground instead of text-green-600/blue-600
- replace colored backgrounds with bg-secondary, bg-muted, bg-primary/5
- maintain proper contrast and accessibility with semantic color tokens
- ensure consistent black/white theme across all components

src/client/app.css

@@ -12,7 +12,7 @@
 	--card-foreground: oklch(0.145 0 0);
 	--popover: oklch(1 0 0);
 	--popover-foreground: oklch(0.145 0 0);
-	--primary: oklch(0.451 0.211 262.881);
+	--primary: oklch(0.145 0 0);
 	--primary-foreground: oklch(0.985 0 0);
 	--secondary: oklch(0.97 0 0);
 	--secondary-foreground: oklch(0.205 0 0);
@@ -23,7 +23,7 @@
 	--destructive: oklch(0.577 0.245 27.325);
 	--border: oklch(0.922 0 0);
 	--input: oklch(0.922 0 0);
-	--ring: oklch(0.451 0.211 262.881);
+	--ring: oklch(0.145 0 0);
 	--chart-1: oklch(0.646 0.222 41.116);
 	--chart-2: oklch(0.6 0.118 184.704);
 	--chart-3: oklch(0.398 0.07 227.392);
@@ -38,8 +38,8 @@
 	--card-foreground: oklch(0.985 0 0);
 	--popover: oklch(0.205 0 0);
 	--popover-foreground: oklch(0.985 0 0);
-	--primary: oklch(0.585 0.233 262.881);
-	--primary-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.985 0 0);
+	--primary-foreground: oklch(0.145 0 0);
 	--secondary: oklch(0.269 0 0);
 	--secondary-foreground: oklch(0.985 0 0);
 	--muted: oklch(0.269 0 0);
@@ -49,7 +49,7 @@
 	--destructive: oklch(0.704 0.191 22.216);
 	--border: oklch(1 0 0 / 10%);
 	--input: oklch(1 0 0 / 15%);
-	--ring: oklch(0.585 0.233 262.881);
+	--ring: oklch(0.985 0 0);
 	--chart-1: oklch(0.488 0.243 264.376);
 	--chart-2: oklch(0.696 0.17 162.48);
 	--chart-3: oklch(0.769 0.188 70.08);

src/client/app.tsx

@@ -5,7 +5,7 @@ const router = createRouter({
 	routeTree,
 	basepath: "/agw",
 	defaultErrorComponent: ({ error }) => (
-		<div style={{ padding: 20, color: "red" }}>
+		<div className="p-5 text-destructive">
 			<h2>Error</h2>
 			<pre>{error instanceof Error ? error.message : String(error)}</pre>
 		</div>

src/client/features/home/components/upcoming-votes.tsx

@@ -78,7 +78,7 @@ export function UpcomingVotes() {
 								{item.summary}
 							</p>
 						)}
-						<span className="inline-block mt-2 text-xs font-medium text-blue-600">
+						<span className="inline-block mt-2 text-xs font-medium text-primary">
 							Jetzt abstimmen →
 						</span>
 					</Link>

src/client/features/legislation/components/legislation-detail.tsx

@@ -51,7 +51,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
 					{legislation.title}
 				</h1>
 				{legislation.beratungsstand && (
-					<span className="inline-block mt-2 text-xs px-2 py-1 rounded-full bg-blue-100 text-blue-800">
+					<span className="inline-block mt-2 text-xs px-2 py-1 rounded-full bg-secondary text-secondary-foreground">
 						{legislation.beratungsstand}
 					</span>
 				)}
@@ -78,7 +78,7 @@ export function LegislationDetail({ legislationId }: LegislationDetailProps) {
 					<button
 						type="button"
 						onClick={() => setShowFullText(!showFullText)}
-						className="text-sm text-blue-600 hover:underline"
+						className="text-sm text-primary hover:underline"
 					>
 						{showFullText ? "Volltext ausblenden" : "Volltext anzeigen"}
 					</button>

src/client/features/legislation/components/vote-result.tsx

@@ -12,13 +12,13 @@ interface VoteResultProps {
 }
 
 const VOTE_COLORS: Record<string, string> = {
-	yes: "bg-green-100 text-green-800",
-	ja: "bg-green-100 text-green-800",
-	no: "bg-red-100 text-red-800",
-	nein: "bg-red-100 text-red-800",
-	abstain: "bg-gray-100 text-gray-600",
-	enthaltung: "bg-gray-100 text-gray-600",
-	no_show: "bg-gray-50 text-gray-400",
+	yes: "bg-secondary text-secondary-foreground",
+	ja: "bg-secondary text-secondary-foreground",
+	no: "bg-muted text-muted-foreground",
+	nein: "bg-muted text-muted-foreground",
+	abstain: "bg-accent text-accent-foreground",
+	enthaltung: "bg-accent text-accent-foreground",
+	no_show: "bg-muted/50 text-muted-foreground/70",
 }
 
 const VOTE_LABELS: Record<string, string> = {
@@ -36,8 +36,8 @@ export function VoteResult({ userVote, politicianVotes }: VoteResultProps) {
 
 	return (
 		<div className="space-y-4">
-			<div className="p-3 rounded-lg bg-blue-50 border border-blue-200">
-				<p className="text-xs text-blue-600 font-medium">Dein Vote</p>
+			<div className="p-3 rounded-lg bg-primary/5 border border-border">
+				<p className="text-xs text-primary font-medium">Dein Vote</p>
 				<p className="text-sm font-semibold mt-1">{userLabel}</p>
 			</div>
 
@@ -72,7 +72,7 @@ export function VoteResult({ userVote, politicianVotes }: VoteResultProps) {
 										{label}
 									</span>
 									{matches && (
-										<span className="text-xs text-green-600">= Dein Vote</span>
+										<span className="text-xs text-primary">= Dein Vote</span>
 									)}
 								</div>
 							</div>

src/client/features/legislation/components/vote-widget.tsx

@@ -7,12 +7,12 @@ interface VoteWidgetProps {
 }
 
 const choices: { value: UserVoteChoice; label: string; color: string }[] = [
-	{ value: "ja", label: "Ja", color: "bg-green-600 hover:bg-green-700" },
-	{ value: "nein", label: "Nein", color: "bg-red-600 hover:bg-red-700" },
+	{ value: "ja", label: "Ja", color: "bg-primary hover:bg-primary/90" },
+	{ value: "nein", label: "Nein", color: "bg-secondary hover:bg-secondary/80" },
 	{
 		value: "enthaltung",
 		label: "Enthaltung",
-		color: "bg-gray-500 hover:bg-gray-600",
+		color: "bg-muted hover:bg-muted/80",
 	},
 ]
 

src/client/features/politician/components/politician-detail.tsx

@@ -13,13 +13,13 @@ import {
 const VOTE_COLORS: Record<string, { bg: string; text: string; label: string }> =
 	{
 		yes: {
-			bg: "bg-green-100 dark:bg-green-900/40",
-			text: "text-green-800 dark:text-green-300",
+			bg: "bg-secondary",
+			text: "text-secondary-foreground",
 			label: "Ja",
 		},
 		no: {
-			bg: "bg-red-100 dark:bg-red-900/40",
-			text: "text-red-800 dark:text-red-300",
+			bg: "bg-muted",
+			text: "text-muted-foreground",
 			label: "Nein",
 		},
 		abstain: {

src/client/features/settings/components/settings-page.tsx

@@ -287,7 +287,7 @@ export function SettingsPage() {
 								<div className="flex items-center gap-2">
 									{devHealth && (
 										<span
-											className={`text-xs ${devHealth === "ok" ? "text-green-600" : "text-destructive"}`}
+											className={`text-xs ${devHealth === "ok" ? "text-foreground" : "text-destructive"}`}
 										>
 											{devHealth}
 										</span>
@@ -314,7 +314,7 @@ export function SettingsPage() {
 								<div className="flex items-center gap-2">
 									{devPush && (
 										<span
-											className={`text-xs ${devPush === "ok" ? "text-green-600" : "text-destructive"}`}
+											className={`text-xs ${devPush === "ok" ? "text-foreground" : "text-destructive"}`}
 										>
 											{devPush}
 										</span>
@@ -344,7 +344,9 @@ export function SettingsPage() {
 								<span className="text-sm">Alle Themen folgen</span>
 								<div className="flex items-center gap-2">
 									{devTopics && (
-										<span className="text-xs text-green-600">{devTopics}</span>
+										<span className="text-xs text-muted-foreground">
+											{devTopics}
+										</span>
 									)}
 									<Button
 										size="sm"
@@ -368,7 +370,7 @@ export function SettingsPage() {
 								<span className="text-sm">Allen Themen entfolgen</span>
 								<div className="flex items-center gap-2">
 									{devUnfollowTopics && (
-										<span className="text-xs text-green-600">
+										<span className="text-xs text-muted-foreground">
 											{devUnfollowTopics}
 										</span>
 									)}
@@ -389,7 +391,7 @@ export function SettingsPage() {
 								<span className="text-sm">Alle Abgeordnete folgen</span>
 								<div className="flex items-center gap-2">
 									{devPoliticians && (
-										<span className="text-xs text-green-600">
+										<span className="text-xs text-muted-foreground">
 											{devPoliticians}
 										</span>
 									)}
@@ -421,7 +423,7 @@ export function SettingsPage() {
 								<span className="text-sm">Allen Abgeordneten entfolgen</span>
 								<div className="flex items-center gap-2">
 									{devUnfollowPoliticians && (
-										<span className="text-xs text-green-600">
+										<span className="text-xs text-muted-foreground">
 											{devUnfollowPoliticians}
 										</span>
 									)}
@@ -442,7 +444,9 @@ export function SettingsPage() {
 								<span className="text-sm">Abgeordnete neu laden</span>
 								<div className="flex items-center gap-2">
 									{devReload && (
-										<span className="text-xs text-green-600">{devReload}</span>
+										<span className="text-xs text-muted-foreground">
+											{devReload}
+										</span>
 									)}
 									<Button
 										size="sm"