Apply linen design system across app

src/app/dashboard/profil/_components/delete-account-dialog.tsx

@@ -23,7 +23,7 @@ export function DeleteAccountDialog() {
   const [confirmText, setConfirmText] = useState("");
   const [isPending, startTransition] = useTransition();
 
-  const isConfirmed = confirmText === "LÖSCHEN";
+  const isConfirmed = confirmText === "DELETE";
 
   const handleDelete = () => {
     if (!isConfirmed) return;
@@ -44,18 +44,19 @@ export function DeleteAccountDialog() {
     <Dialog open={open} onOpenChange={setOpen}>
       <DialogTrigger asChild>
         <Button variant="destructive" className="w-full sm:w-auto">
-          <AlertTriangle className="h-4 w-4 mr-2" />
+          <AlertTriangle className="h-4 w-4" />
           Account & Daten endgültig löschen
         </Button>
       </DialogTrigger>
-      <DialogContent className="border-destructive/30">
+      <DialogContent className="border-[var(--danger)]">
         <DialogHeader>
-          <DialogTitle className="text-destructive flex items-center gap-2">
+          <DialogTitle className="flex items-center gap-2 text-[var(--danger)]">
             <AlertTriangle className="h-5 w-5" />
             Gefahrenzone: Account löschen
           </DialogTitle>
-          <DialogDescription className="text-base pt-2">
-            Diese Aktion kann <strong className="text-foreground">nicht</strong> rückgängig gemacht werden. 
+          <DialogDescription className="pt-2 text-base">
+            Diese Aktion kann <strong className="text-[var(--ink)]">nicht</strong>{" "}
+            rückgängig gemacht werden.
             Wenn du das letzte Elternteil im Haushalt bist, wird die gesamte
             Familie inklusive Kinder gelöscht. Gibt es ein weiteres Elternteil,
             bleibt der Haushalt für diese Person erhalten und nur dein Account
@@ -63,16 +64,17 @@ export function DeleteAccountDialog() {
           </DialogDescription>
         </DialogHeader>
         
-        <div className="bg-destructive/10 text-destructive-foreground p-3 text-sm rounded-md my-2 border border-destructive/20">
-          Bitte tippe das Wort <strong>LÖSCHEN</strong> in das Feld unten ein, um den Vorgang zu bestätigen.
+        <div className="my-2 rounded-lg border border-[var(--danger)] bg-[var(--danger-soft)] p-3 text-sm text-[var(--danger)]">
+          Bitte tippe <strong>DELETE</strong> in das Feld unten ein, um den
+          Vorgang zu bestätigen.
         </div>
 
         <div className="grid gap-2 py-4">
           <Input 
             value={confirmText}
             onChange={(e) => setConfirmText(e.target.value)}
-            placeholder="LÖSCHEN"
-            className="border-destructive/50 focus-visible:ring-destructive"
+            placeholder="DELETE"
+            className="border-[var(--danger)] focus-visible:ring-[var(--focus-ring)]"
           />
         </div>